vue+element 实现动态生成分组全选反选。

1.效果展示

点击弹窗触发全选界面，点击输出按钮返回选中的小选名称。

2. 代码实现

<template>
  <div>
    <el-popover placement="bottom" title="标题" trigger="click">
      <!-- 全选 -->
      <el-checkbox v-model="CheckAll" @change="handleCheckAllChange">全选</el-checkbox>

      <div v-for="(groupItem,groupIndex) in allData" :key="groupItem.id" style="margin:10px 0;">
        <el-checkbox
          v-model="checkedArr[groupIndex]"
          @change="groupAllChange(groupIndex)"
        >{{groupItem.title}}</el-checkbox>
        <div style="margin:5px 0;">
          <el-checkbox
            v-for="(item,index) in groupItem.children"
            :label="item.title"
            :key="item.id"
            v-model="checkedBtn[groupIndex][index]"
            @change="groupBtnChange(groupIndex)"
          >{{item.title}}</el-checkbox>
        </div>
      </div>

      <!-- 输出数据的按钮 -->
      <div @click="exportData">输出</div>

      <!-- 触发气泡的按钮 -->
      <el-button slot="reference">弹窗按钮</el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  created() {
    // 处理分组全选数据
    let arr1 = new Array(this.allData.length).fill(false)
    this.checkedArr = arr1
    // 处理分组小选数据
    let arr2 = []
    this.allData.forEach(item => {
      let child = new Array(item.children.length).fill(false)
      arr2.push(child)
    })
    this.checkedBtn = arr2
  },
  data() {
    return {
      allData: [
        { title: "第一组", id: 1, children: [{ title: "上海", id: 11 }, { title: "北京", id: 12 }, { title: "广州", id: 13 }, { title: "深圳", id: 14 }] },
        { title: "第二组", id: 2, children: [{ title: "苹果", id: 21 }, { title: "香蕉", id: 22 }, { title: "葡萄", id: 23 }, { title: "榴莲", id: 24 }] },
      ],
      CheckAll: false,
      checkedArr: [], // 分组全选选中情况
      checkedBtn: [] // 所有小选的选中情况
    }
  },
  methods: {
    handleCheckAllChange() {
      // 1. 全选控制分组全选
      for (let i = 0; i < this.checkedArr.length; i++) {
        this.checkedArr[i] = this.CheckAll
        // 2. 全选控制分组小选全选
        for (let j = 0; j < this.checkedBtn[i].length; j++) {
          this.checkedBtn[i][j] = this.CheckAll
        }
      }
    },
    // 输出选中的小选名
    exportData() {
      let name = []
      for (let i = 0; i < this.checkedBtn.length; i++) {
        for (let j = 0; j < this.checkedBtn[i].length; j++) {
          if (this.checkedBtn[i][j]) {
            name.push(this.allData[i].children[j].title)
          }
        }
      }
      console.log(name);
      return name
    },
    groupAllChange(index) {
      // 1. 分组全选控制小选
      let tag = this.checkedArr[index]
      for (let i = 0; i < this.checkedBtn[index].length; i++) {
        this.checkedBtn[index][i] = tag
      }
      // 2. 分组全选控制全选
      this.CheckAll = this.checkedArr.every(item => item === true)
    },
    // 小选控制全选
    groupBtnChange(index) {
      // 1. 小选控制分组全选
      let tag = this.checkedBtn[index].every(item => item === true)
      this.checkedArr[index] = tag
      // 2. 小选控制全选
      this.CheckAll = this.judge()
    },
    // 判断所有小选的选中情况
    judge() {
      for (let i = 0; i < this.checkedBtn.length; i++) {
        for (let j = 0; j < this.checkedBtn[i].length; j++) {
          if (this.checkedBtn[i][j] === false) {
            return false
          }
        }
      }
      return true
    }
  },


}
</script>