Element选择弹窗并回显到选择框中

713 阅读1分钟

1678693753934.jpg

w2.jpg

HTML
<div class="col-sm-3">
   <el-select v-model="item.auditContent" :ref="'selectAuditCont'+index" 
   size="small" @click.native="openDialogflycho(index,item.auditContent)"  @focus="focusHide(index)" multiple style="width: 80%;" placeholder="请选择审计内容">
     <el-option v-for="item in valueList" :key="item.id" :label="item.name" :value="item.id">        </el-option>
   </el-select>
</div>
// 弹窗
<el-dialog
  title="审计内容"
  :visible.sync="dialogflycho"
  :closeOnClickModal='false'
  :modal-append-to-body="false"
  width="30%" style="z-index:99999">
  <div>
      <div>
        <!--  1-合格证, 2-票据, 3-台账, 4-考勤, 5-车辆, 51-车钥匙, 52-里程表 -->
        <el-checkbox-group v-model="certificateCar">
            <el-checkbox :label="1" disabled>合格证</el-checkbox>
            <div>
                <el-checkbox :label="2">票据</el-checkbox>
            </div>
            <div>
                <el-checkbox :label="3">台账</el-checkbox>
            </div>
            <div>
                <el-checkbox :label="4">考勤</el-checkbox>
            </div>                    
            <el-checkbox :label="5" disabled>车辆</el-checkbox>
            <el-checkbox :label="51">车钥匙</el-checkbox>
            <el-checkbox :label="52">里程表</el-checkbox>
        </el-checkbox-group>
      </div>
  </div>
  <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogflycho = false">取 消</el-button>
      <el-button size="small" type="primary" @click="flechetTruebtn">确 定</el-button>
  </span>
  </el-dialog>
    data(){
        certificateStatus: [],
        certificateCar: [1,5],
          valueList: [{name: '合格证', id: 1},{name: '票据', id: 2},{name: '台账', id: 3},{name: '考勤', id: 4},{name: '车辆', id: 5},{name: '车钥匙', id: 51},{name: '里程表', id: 52}],
    }
// 隐藏下拉框
focusHide(val) {
    let cruRefs = eval("this.$refs.selectAuditCont" +val)[0]
    cruRefs.blur()
},   
 // 打开弹窗
  openDialogflycho(val,item) {
    this.dialogflycho = true
    if(item.length > 0) {
      this.certificateCar = item   // 已经选中的
    } else {
      this.certificateCar = [1,5]   // 默认选中合格证,车辆
    }

    this.curChangeCont = val 
  },
  // 确定
  //审计内容点击确定
  flechetTruebtn(){
    this.dialogflycho = false
    // 获取内容并排序
    this.seltmult[this.curChangeCont].auditContent = this.certificateCar.sort()
  },