el-checkbox 三级联动实现，有图有数据

el-checkbox 三级联动实现，一层数据结构和两层数据结构的同步选中取消

效果图

点击获取数据，即可获取当前选中所有的id

代码

<template>
  <div style="display: flex">
    <div>
      <el-checkbox v-model="AllChecked" @change="allHandle">全选</el-checkbox>
      <div v-for="(item, index) in menuList" :key="item.rId" style="margin-top: 10px">
        二级 {{ index }}
        {{ SecendSeleced[index] }}
        <el-checkbox v-model="SecendSeleced[index]" @change="allHandleSecendSeleced(index, SecendSeleced[index])"
          ><span style="font-weight: bold">{{ item.rName }}</span></el-checkbox
        >
        三级 --{{ index }} ---{{ ThreeSeleced[index] }}
        <div v-for="(item, index) in 3" :key="index">三级触发 --{{ index }} ---{{ ThreeSeleced[index] }}</div>
        <el-checkbox-group style="margin-top: 20px" @change="allHandleThreeSeleced(index, ThreeSeleced[index])" v-model="ThreeSeleced[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>
        111
      </div>
      <el-button @click="getNew()" style="margin: 20px">获取数据</el-button>
    </div>
    <div v-for="(item, index) in n" :key="index">
      <el-checkbox-group v-model="S" @change="aa(S, item.d)">
        <el-checkbox :label="item.rId"></el-checkbox>
      </el-checkbox-group>
      {{ item.rId }}
      <!-- {{ item.d }} -->
    </div>
    <!-- <el-button @click="getIndex()" style="margin: 20px">求索引</el-button> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      AllChecked: false, // 全选
      list: [
        {
          rName: '子分组1',

          mzy: '1',

          rId: '1',
        },
        {
          rName: '子分组2',

          mzy: '1',

          rId: '11',
        },
        {
          rName: '子分组3',

          mzy: '1',

          rId: '111',
        },
        {
          rName: '子分组1',
          mzy: '2',

          rId: '2',
        },
        {
          rName: '子分组2',
          mzy: '2',

          rId: '22',
        },
        {
          rName: '子分组3',
          mzy: '2',

          rId: '222',
        },
        {
          rName: '子分组1',
          mzy: '3',

          rId: '3',
        },
        {
          rName: '子分组2',
          mzy: '3',

          rId: '33',
        },
        {
          rName: '子分组3',
          mzy: '3',

          rId: '333',
        },
      ],
      menuList: [
        {
          rId: '1',
          rName: '父分组1',
          mzy: '1',

          resourcesGroupVos: [
            { rName: '子分组1', rId: '1' },
            { rName: '子分组2', rId: '11' },
            { rName: '子分组3', rId: '111' },
          ],
        },
        {
          rName: '父分组2',
          rId: '2',
          mzy: '2',

          resourcesGroupVos: [
            { rName: '子分组1', rId: '2' },
            { rName: '子分组2', rId: '22' },
            { rName: '子分组3', rId: '222' },
          ],
        },
        {
          rName: '父分组3',
          rId: '3',
          mzy: '3',

          resourcesGroupVos: [
            { rName: '子分组1', rId: '3' },
            { rName: '子分组2', rId: '33' },
            { rName: '子分组3', rId: '333' },
          ],
        },
      ],
      systemOptions1: [
        {
          rId: '1',
          rName: '父分组1',

          resourcesGroupVos: [
            { rName: '子分组1', rId: '1' },
            { rName: '子分组2', rId: '11' },
            { rName: '子分组3', rId: '111' },
          ],
        },
        {
          rName: '父分组2',
          rId: '2',

          resourcesGroupVos: [
            { rName: '子分组1', rId: '2' },
            { rName: '子分组2', rId: '22' },
            { rName: '子分组3', rId: '222' },
          ],
        },
        {
          rName: '父分组3',
          rId: '3',

          resourcesGroupVos: [
            { rName: '子分组1', rId: '3' },
            { rName: '子分组2', rId: '33' },
            { rName: '子分组3', rId: '333' },
          ],
        },
      ],
      ThreeSeleced: [], // 选中的列表
      SecendSeleced: [], //列表类全选
      systemOptionsList: [], // 所有可选项
      b: [],
      S: [],
      val: [],
      check: [],
      listService: [],
      n: [],
    }
  },
  mounted() {
    this.getData()
    this.getIndex()
  },
  methods: {
    getIndex() {
      for (var i in this.list) {
        var list3 = []
        for (var j in this.list) {
          if (this.list[i].mzy == this.list[j].mzy && this.list[j].key != 1) {
            this.list[j].key = 1

            list3.push(this.list[j])
          }
        }
        if (list3.length > 0) {
          this.listService.push(list3)
        }
      }
      console.log('看你的了this.listService', this.listService)
      this.listService.forEach((val, index) => {
        val.forEach((v, indexv) => {
          v.d = index + '@' + v.rId
        })
      })
      console.log('看你的了this.listService', this.listService)
      this.n = this.listService.reduce((prev, next) => {
        return prev.concat(next)
      })
      console.log('看你的了this.listService', this.n)
    },
    aa(val, index) {
      this.$forceUpdate()
      this.val = val
      console.log('index,val', this.val, index)
      var left = index.split('@')[0]
      var right = index.split('@')[1]
      console.log('left', left, right)

      var index = this.ThreeSeleced[left].indexOf(right)
      console.log('index', index)
      if (index > -1) {
        this.ThreeSeleced[left].splice(index, 1)
      } else {
        this.ThreeSeleced[left].push(right)
      }
      console.log('this.ThreeSeleced2222', this.ThreeSeleced)
      this.SecendSeleced[left] = this.ThreeSeleced[left].length === this.systemOptions1[left].resourcesGroupVos.length
      this.$forceUpdate()

      if (this.val.length === this.list.length) {
        this.AllChecked = true
      } else {
        this.AllChecked = false
      }
    },
    getNew() {
      this.b = []
      for (let i = 0; i < 3; i++) {
        this.b.push(this.ThreeSeleced[i])
      }
      this.check = this.b.reduce((prev, next) => {
        return prev.concat(next) //循环将数组进行拼接
      })
      this.S = this.check
      console.log('统计选中的数据', this.check)
    },
    getData() {
      // 此处应该是接口数据
      for (let item in this.menuList) {
        let strArr = []
        this.ThreeSeleced.push(strArr) // 创建选中数据数组
        console.log('this.ThreeSeleced', this.ThreeSeleced)
        this.systemOptionsList.push(this.menuList[item].resourcesGroupVos) // 创建所有可选项数组
        this.SecendSeleced.push(false) //所有列表类初始为false
      }
    },
    allHandle(val) {
      console.log('val', 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.ThreeSeleced[index] = val ? Arrlist[index] : []
        console.log('全选this.ThreeSeleced', this.ThreeSeleced)
      }
      for (let index in this.SecendSeleced) {
        this.SecendSeleced[index] = val
      }
      this.getNew()
    },
    allHandleSecendSeleced(index, val) {
      // 列表类全选
      let arr = []
      for (let item in this.systemOptionsList[index]) {
        arr.push(this.systemOptionsList[index][item].rId)
      }
      this.ThreeSeleced[index] = val ? arr : []
      this.getAllState()
    },
    allHandleThreeSeleced(index, value) {
      console.log('index, value', index, value)
      // 子选项联动
      this.$forceUpdate() // ！！！实时改变数据
      let b = value.length === this.systemOptionsList[index].length
      this.SecendSeleced[index] = b
      this.getAllState()
    },
    getAllState() {
      // 判断列表类是否全选来改变总的全选状态
      let [...arrFlag] = new Set(this.SecendSeleced)
      console.log('arrFlag', arrFlag)
      if (arrFlag.length === 1 && arrFlag[0] === true) {
        this.AllChecked = true
      } else {
        this.AllChecked = false
      }
      console.log('AllChecked', this.AllChecked)
      this.getNew()
    },
  },
}
</script>