element-UI,根据后台数据、动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项



export default {
    data() {
      return {
        checkedEquipments: [], //随意修改后的checked项(即要传到后台的变更数据)
        equipments: [   // 所有数据
          {
            id: '1',
            menu: '设备1',
            childMenu: [{
                id: '1-1',
                menu: '暖通一'
              }, {
                id: '1-2',
                menu: '照明一'
              }, {
                id: '1-3',
                menu: '取暖一'
              }, {
                id: '1-4',
                menu: '应急一'
              }
            ]
          },
          {
            id: '2',
            menu: '设备2',
            childMenu: [
              {
                id: '2-1',
                menu: '暖通二'
              }, {
                id: '2-2',
                menu: '照明二'
              }, {
                id: '2-3',
                menu: '取暖二'
              }, {
                id: '2-4',
                menu: '应急二'
              }
            ]
          }
        ],
        checkEquip: [  //模拟后台获取的数据(各el-checkbox-group默认checked项)
          {
            id: '1',
            menu: '设备1',
            childMenu: [
              {
                id: '1-1',
                menu: '暖通一'
              }, {
                id: '1-2',
                menu: '照明一'
              }
            ]
          }, {
            id: '2',
            menu: '设备2',
            childMenu: []
          }
        ]
      };
    },
    methods: {
      handleChange () {
        this.checkEquipArr = []
        let arr = this.checkedEquipments
        for (let i = 0; i < arr.length; i ++) {
          let equipment = arr[i]
          if (equipment.length > 0) {
            let obj = {
              id: this.equipments[i].id,
              equips: []
            }
            for (let j = 0; j < equipment.length; j++) {
              obj.equips.push(equipment[j])
            }
            this.checkEquipArr.push(obj)
          }
        }
        console.log(this.checkEquipArr);
      }
    },
    created () {
      // 初始化默认选中状态
      for (let i = 0; i < this.checkEquip.length; i++) {
        let checkArr = []
        let item = this.checkEquip[i].childMenu
        if (item.length === 0) {
          this.checkedEquipments.push([])
        }else {
          for (let j = 0; j < item.length; j ++) {
            checkArr.push(item[j].id)
          }
          this.checkedEquipments.push(checkArr)
        }
      }
      console.log(this.checkedEquipments);
    }
  };

每个人的数据格式不一样,但是实现逻辑都是一样的。可以作为参考,稍微修改一下代码实现符合自己的数据格式。

实现结果(动态生成 checkbox-group,并且设置默认checked项),具体v-model值,需要打印看咯

简单点来说:

就是根据你的数据生成一个二维数组,比如data是lists,那么就是这样写了

data() {
    return {
        lists: [你的数据],
        checkList: []
    }
}        
for="(power, index) in lists" v-model="checkList[index]">
              for="power in group.powers" :key="power.id" :label="power.id">{{power.name}}
 
   created() {
      for (let key in this.lists) {
        this.$set(this.checkList, key, [])
      }
    }

相关