实现目标

• 点击全选时列表类全选，并且各个子项全部选中

• 点击某个列表类选中时，对应的子项全部选中

• 选择子项时列表类和全选实现联动

实现效果

数据格式

template页面代码

<span>系统列表：</span>
      <el-checkbox
        v-model="checkAll1"
        @change="handleCheckAllChange11"
      >全选</el-checkbox>
      <div v-for="(item, index) in menuList" :key="item.rId" style="margin-top:10px">
        <el-checkbox
          v-model="checkedAll[index]"
          @change="handleCheckAllChange111(index, checkedAll[index])"
        ><span style="font-weight: bold;">{
   
   {item.rName}}</span></el-checkbox>
      <el-checkbox-group @change="handleCheckedCitiesChange11(index, checkedList[index])" v-model="checkedList[index]">
        <el-checkbox
          style="display:inline-block; margin:5px 0 0 20px"
          v-for="item in item.resourcesGroupVos"
          :key="item.rId"
          :label="item.rId"
        >{
   
   {item.rName}}</el-checkbox>
      </el-checkbox-group>
      </div>

data()函数数据

checkAll1: false, // 全选
menuList : [],
systemOptions1: [],
checkedList: [], // 选中的列表
checkedAll: [], //列表类全选
systemOptionsList: [], // 所有可选项

接收数据

selectAllMenu().then(res => {
    
    
        if (res.success === 'true') {
    
    
          this.menuList = res.data
          this.systemOptions1 = res.data
          for (let item in res.data) {
    
    
            let strArr = []
            this.checkedList.push(strArr) // 创建选中数据数组
            this.systemOptionsList.push(res.data[item].resourcesGroupVos) // 创建所有可选项数组
            this.checkedAll.push(false) //所有列表类初始为false
          }
        }
      })

具体实现方法

handleCheckAllChange11 (val) {
    
     // 全选
      let Arrlist = []
      for (let i = 0; i < this.systemOptions1.length; i++) {
    
    
        let arr = []
        Arrlist.push(arr)
      }
      for (let index in this.systemOptions1) {
    
    
        for (let index1 in this.systemOptions1[index].resourcesGroupVos) {
    
    
          Arrlist[index].push(this.systemOptions1[index].resourcesGroupVos[index1].rId)
        }
        this.checkedList[index] = val ? Arrlist[index] : []
      }
      for (let index in this.checkedAll) {
    
    
        this.checkedAll[index] = val
      }
    },
    handleCheckAllChange111 (index, val) {
    
     // 列表类全选
      let arr = []
      for (let item in this.systemOptionsList[index]) {
    
    
        arr.push(this.systemOptionsList[index][item].rId)
      }
      this.checkedList[index] = val ? arr : []
      let [...arrFlag] = new Set(this.checkedAll)
      if (arrFlag.length === 1 && arrFlag[0] === true) {
    
    
        this.checkAll1 = true
      } else {
    
    
        this.checkAll1 = false
      }
    },
    handleCheckedCitiesChange11 (index, value) {
    
     // 子选项联动
      this.$forceUpdate() // ！！！实时改变数据
      let b = value.length === this.systemOptionsList[index].length
      this.checkedAll[index] = b
      // 判断列表类是否全选来改变总的全选状态
      let [...arrFlag] = new
      Set(this.checkedAll)
      if (arrFlag.length === 1 && arrFlag[0] === true) {
    
    
        this.checkAll1 = true
      } else {
    
    
        this.checkAll1 = false
      }
    },

每天一个知识点，O(∩_∩)O