vue 前端选择弹窗取值完整实例[经典]

<!-- 班次信息 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="班次" prop="wt_no">
                <el-input v-model="temp.wt_name" readonly>
                  <template #append>
                    <el-button @click="openShiftSelector">
                      选择班次
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 正班时间 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="上班时间" prop="wt_ts">
                <el-input v-model="temp.wt_ts" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下班时间" prop="wt_te">
                <el-input v-model="temp.wt_te" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="正班工时" prop="wt_hour">
                <el-input v-model="temp.wt_hour" readonly/>
              </el-form-item>
            </el-col>
          </el-row>

 <!-- 添加班次选择弹窗 -->
      <el-dialog v-model="shiftDialogVisible" title="选择班次" width="600px">
        <el-table
          :data="wt_noOptions"
          highlight-current-row
          @current-change="handleShiftSelect"
          style="width: 100%"
        >
          <el-table-column prop="wt_no" label="班次编号" width="100"/>
          <el-table-column prop="wt_name" label="班次名称" width="150"/>
          <el-table-column prop="wt_ts" label="上班时间" width="100">
            <template #default="{row}">
              {{ formatTime(row.wt_ts) }}
            </template>
          </el-table-column>
          <el-table-column prop="wt_te" label="下班时间" width="100">
            <template #default="{row}">
              {{ formatTime(row.wt_te) }}
            </template>
          </el-table-column>
          <el-table-column prop="wt_hour" label="工时" width="80"/>
          <el-table-column prop="rmk" label="备注"/>
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="shiftDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmShiftSelect">确定</el-button>
          </div>
        </template>
      </el-dialog>

// 在 data() 中添加
data() {
  return {
    // ... 其他数据
    shiftDialogVisible: false, // 班次选择弹窗显示状态
    selectedShift: null, // 临时存储选中的班次
  }
},

// 在 methods 中添加
methods: {
  // ... 其他方法

  // 打开班次选择弹窗
  openShiftSelector() {
    this.shiftDialogVisible = true;
    this.selectedShift = null;
  },

  // 处理班次选择
  handleShiftSelect(row) {
    this.selectedShift = row;
  },

  // 确认班次选择
  confirmShiftSelect() {
    if (this.selectedShift) {
      this.temp = {
        ...this.temp,
        wt_no: this.selectedShift.wt_no,
        wt_name: this.selectedShift.wt_name,
        wt_ts: this.selectedShift.wt_ts,
        wt_te: this.selectedShift.wt_te,
        wt_hour: this.selectedShift.wt_hour
      };
    }
    this.shiftDialogVisible = false;
  },

  // 修改关闭弹窗方法
  closeDialog() {
    this.$refs.dataForm.resetFields();
    this.temp = {
      dp_no: '',
      dp_name: '',
      wt_d: '',
      wt_no: '',
      wt_name: '',
      wt_ts: '',
      wt_te: '',
      wt_hour: '',
      wt_ts1: null,
      wt_te1: null,
      wt_hour1: 0,
      pa_operate: '',
      pa_operate_name: '',
      rmk: '',
      status: true
    };
  },
}

1、将班次选择改为按钮开窗选择

2、使上班时间、下班时间和工时为只读字段

3、开窗选择返回班次信息