vue front-end selection pop-up window value complete example [classic]

<!--Shift information-->
          <el-row>
            <el-col :span="24">
              <el-form-item label="Ship" prop="wt_no">
                <el-input v-model="temp.wt_name" readonly>
                  <template #append>
                    <el-button @click="openShiftSelector">Select shift</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!--Main shift time-->
          <el-row>
            <el-col :span="8">
              <el-form-item label="Working hours" prop="wt_ts">
                <el-input v-model="temp.wt_ts" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Get off hours" prop="wt_te">
                <el-input v-model="temp.wt_te" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="First shift working hours" prop="wt_hour">
                <el-input v-model="temp.wt_hour" readonly/>
              </el-form-item>
            </el-col>
          </el-row>

 <!--Add shift selection pop-up window-->
      <el-dialog v-model="shiftDialogVisible" title="Select shift" width="600px">
        <el-table
          :data="wt_noOptions"
          highlight-current-row
          @current-change="handleShiftSelect"
          style="width: 100%"
        >
          <el-table-column prop="wt_no" label="Ship number" width="100"/>
          <el-table-column prop="wt_name" label="Ship Name" width="150"/>
          <el-table-column prop="wt_ts" label="Working hours" width="100">
            <template #default="{row}">
              {{ formatTime(row.wt_ts) }}
            </template>
          </el-table-column>
          <el-table-column prop="wt_te" label="Get off hours" width="100">
            <template #default="{row}">
              {{ formatTime(row.wt_te) }}
            </template>
          </el-table-column>
          <el-table-column prop="wt_hour" label="Many hours" width="80"/>
          <el-table-column prop="rmk" label="Note"/>
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="shiftDialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="confirmShiftSelect">Sure</el-button>
          </div>
        </template>
      </el-dialog>

//Add in data()
data() {
  return {
    //...Other data
    shiftDialogVisible: false, //Shift selection pop-up display status
    selectedShift: null, //Temporarily store selected shifts
  }
},

//Add in methods
methods: {
  //...Other methods

  //Open the shift selection pop-up window
  openShiftSelector() {
    this.shiftDialogVisible = true;
    this.selectedShift = null;
  },

  //Handling shift selection
  handleShiftSelect(row) {
    this.selectedShift = row;
  },

  //Confirm shift selection
  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;
  },

  //Modify the method of closing pop-up window
  closeDialog() {
    this.$();
    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
    };
  },
}