el-checkbox复选框回显的坑、传参数据格式-优快云博客

本文介绍了在Vue.js和ElementUI中使用el-checkbox组件进行复选框回显时遇到的问题及解决方案。内容涉及到复选框绑定的数据格式，特别是当新建和修改操作共用同一表单时，如何正确地设置和回显数组类型的复选框值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当新建/修改共用同一个表单弹窗页面时，复选框绑定赋值要注意

复选框绑定值是数组，数组每一项是label绑定的，即persons对象数组里employeeNo键对应的值：

<el-form ref="form" :model="form">
  <el-form-item label="参与董事" :prop="uassNo" 
   :rules="[{required: true, type: 'array', trigger: 'change', message: '请选择参与董事'}]">
     <el-checkbox-group v-model="form.uassNo">
       <el-checkbox v-for="(item, index) in persons" :label="item.employeeNo" 
       :key="index">{{item.memberName}}</el-checkbox>
     </el-checkbox-group>   
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      form: {
        uassNo: [] //data里定义，避免新建报错
      },
      persons: []
    }
  },
  created() {
    this.getPersons();
  }
  methods: {
    getPersons() {
      调接口获取到所有董事数据 data
      this.persons = data;//[{employeeNo: 1, memberName: '张三'}, {employeeNo: 2, memberName: '李四'}, ...]
    },
    getDetail() {
      调接口获取到详情数据 res.data
      this.form = {...res.data};
      //比如res.data.userList是需要反显的董事数据，结构为[{memberId: 1, memberName: '张三'}]
      if (res.data.userList && res.data.userList.length > 0) {
        let val = res.data.userList.map(item => {
          return item.memberId;
        })
        //this.form.uassNo = val;
        //坑在这里，上面写法是可以回显，但是再去勾选其他复选框选项或者取消勾选都不是立即生效，而是在点了
        //表单其他内容后，才会生效，按照下面方式写就可以了。
        this.$set(this.form, 'uassNo', val);
      } else {
        this.$set(this.form, 'uassNo', []);
      }
    },
    save() {
      //保存的时候，后端接收的参数格式为memberList:[{member_id: '', member_name: ''}]
      //需要处理下数据
      let tempArr= [];
      this.form.uassNo.forEach(item => {
        this.persons.forEach(i => {
          if (item === i.employeeNo) {
            tempArr.push({member_id: i.employeeNo, member_name: i.memberName})
          }
        })
      })
      //tempArr就是所勾选的董事数据入参
    }
  }
}