复选框绑定对象

需求描述：

默认为5条车道

传参格式为[{name: '车道1', status: 3}, {name: '车道2', status: 1}]

其中name为改变的车道名称，status状态为1，2，3

新增：status: 3，新增时选中的车道都是状态3

删除：status: 2，新增时选中但编辑时不选中为删除

更新：status: 1，新增时选中而且编辑时也选中，代表更新

由于编辑时后台传给我的值就是我传给后台的数组对象，而且要根据对象里bindType的状态来提示是否已绑资产，如果该车道已绑资产，是不能操作删除，因此复选框数组要绑定对象。

效果展示

​​​​​​​

实际操作

数组包对象和字符串，对象为列表循环的5条数据，字符串用于复选框回显的数据(编辑时)

<el-form class="pAll pb_60" :model="bayonetForm" :rules="bayonetFromRules" ref="bayonetFormRefs" label-width="130px" style="margin-bottom: 30px">
  <el-form-item label="车道数" prop="numberList">
    <el-checkbox-group class="el-checkbox-lane-box" v-model="numberLane">
      <div v-for='(allItem, allItemIndex) in numberLane' :key="allItemIndex">
        <el-checkbox v-if="typeof(allItem) == 'object'" :disabled="allItem.bindType == 1"
          :label="allItem.name">{{allItem.name}}
          <span v-if="allItem.bindType === 1" class="btn_lane_bind bindText">
            <!-- <svg class="tableFooterIcon" aria-hidden="true">
              <use xlink:href="#el-icon-myzhujiyibangshebei" />
            </svg> -->
            已绑资产
          </span>
        </el-checkbox>
      </div>
    </el-checkbox-group>
  </el-form-item>
</el-form>

data() {
  // 车道数判断
  var validate_Lane = (rule, value, callback) => {
    var a = 0
    this.numberLane.forEach(item => {
      if (typeof(item) === 'string') { // 如果有字符串代表有选择车道
        a++
      }
    })
    if (a === 0) {
      callback(new Error('请选择车道数'))
    } else {
      callback()
    }
  }
  return {
    numberLane: [
      {name:'车道1'},
      {name:'车道2'},
      {name:'车道3'},
      {name:'车道4'},
      {name:'车道5'},
    ], // 车道列表, 获取后台数据回显列表
    bayonetForm: {
      numberList: [], // 车道数
    },
    numberListCopy: [], // 编辑车道储存信息，用于判断删除掉的数据
    editor: false, // 编辑or新增状态
    saveBtnLoad: false, // 确定加载状态
    bayonetFromRules: { // 验证
    numberList: [ // 车道数
      { required: true, validator: validate_Lane, trigger: 'change' },
    ]
  }
},

created() {
  this.getEditFormData() // 编辑或添加
},
methods: {
  getEditFormData() {
    if (this.editor) { // 编辑
      var numberUpdateList = [ // 为全部数据，bindType为1代表已绑定资产
        {bindType: 0, name: '车道1'},
        {bindType: 1, name: '车道2'},
        {bindType: 1, name: '车道3'},
        {bindType: 0, name: '车道4'},
        {bindType: 0, name: '车道5'}
      ]
      var numberList = [ // 为新增时的数据，用于编辑回显，bindType为1代表不能修改
        {bindType: 1, name: '车道2'},
        {bindType: 1, name: '车道3'},
        {bindType: 0, name: '车道5'},
      ]
      this.numberListCopy = JSON.parse(JSON.stringify(numberList)) // 深拷贝，用于确认编辑时作为数据参考
      // numberLane里面的对象里的状态用于判断是否已绑定车道
      // 字符串用于判断回显页面，是否之前就已经勾选了
      this.numberLane = numberUpdateList
      console.log(this.numberLane)
      numberList.forEach(item => {
        this.numberLane.push(item.name)
      })
    }
  }
}

打印console.log(this.numberLane)的值为

[{bindType: 0, name: '车道1'},
 {bindType: 1, name: '车道2'},
 {bindType: 1, name: '车道3'},
 {bindType: 0, name: '车道4'},
 {bindType: 0, name: '车道5'}, '车道2', '车道3', '车道5' ]

编辑时页面回显效果展示：

// 确定按钮
addOrEditSubmit() {
  this.$refs.bayonetFormRefs.validate(async valid => {
    if (!valid) {
      return false
    } else {
      if (this.editor) { // 编辑
        // 获取车道列表绑定的字符串就是最后选择的
        var lane = []
        this.numberLane.forEach(item => {
          if(typeof(item) === 'string') lane.push(item)
        })
        console.log(lane) // ['车道2', '车道3', '车道5']
        var backendValue = JSON.parse(JSON.stringify(this.numberListCopy)) // 深拷贝, 传给后台的值

        // 默认都为2(删除)，因为1(更新)和3(新增)都可以在lane找到
        backendValue.forEach(item => { item.status = 2})

        backendValue.forEach(item => { // 有相同值代表更新
          lane.forEach(el => {
            if (item.name === el) {
              item.status = 1
            }
          })
        })

        // 用于没有修改之前选择的车道
        var laneCopy = []
        backendValue.forEach(item => {
          laneCopy.push(item.name)
        })
        // 用于储存新增数据
        var result = []
        lane.forEach(el => {
          // 判断原先的数组是否包含修改的数组，没有就是新增的
          if (!laneCopy.includes(el)) result.push(el)
        })
        // 将新增的数据给到原始列表
        result.forEach(item => {
          let obj = {}
          obj.name = item // 车道
          obj.status = 3 // 状态新增
          backendValue .push(obj)
        })
        console.log(backendValue)

      } else {
        var lane2 = [] // 选中的数据
        var backendValue = JSON.parse(JSON.stringify(this.numberListCopy)) // 深拷贝, 传给后台的值
        backendValue.forEach(item => {
          if(typeof(item) === 'string') lane2.push(item) // 字符串代表选中的数据
        })
        console.log(lane2)
        lane2.forEach(item => { // 新增
          let obj = {}
          obj.name = item // 车道名称
          obj.status = 3 // 新增时的状态
          backendValue.push(obj)
        })
      }
    }
  })
},