element ui checkbox实现多项全选反选功能

<!-- 说明 -->
<!-- @author ex-jinming002-->
<script>
export default {
  name: 'Overall',
  data() {
    return {
      // 顶部全选所有状态
      checkAll: false,
      isIndeterminate: false,
      checkBoxData: [],
      testData: [
        {
          title: '基本信息：',
          options: [{ label: '存在问题', value: 'laborum officia' }],
        },
        {
          title: '预计进展详情：',
          options: [
            {
              label: '预计土地盘整年份',
              value: 'nostrud fugiat',
            },
            { label: '是否计划本年度开工', value: 'aliqua' },
            { label: 'in deserunt', value: 'mollit sed' },
          ],
        },
        {
          title: '实际进展详情：',
          options: [
            { label: '签约时间', value: 'consectetur proident' },
            { label: '用地面积(公顷)', value: 'dolor et qui cupidatat' },
            { label: '开工时间', value: 'dolore ut occaecat non cillum' },
          ],
        },
        {
          title: '中止项目：',
          options: [
            { label: '中止原因', value: 'exercitation ut' },
            { label: '土地实际盘整面积', value: 'amet' },
            { label: '是否计划盘整', value: 'Excepteur esse in' },
          ],
        },
      ],
    }
  },

  mounted() {
    const tempArr = []
    this.testData.forEach(item => {
      tempArr.push({
        // 子项的全选状态
        checkAll: false,
        // 子项的默认选中的checkbox
        checkedCities: [],
        isIndeterminate: false,
        options: item.options,
        title: item.title,
      })
    })
    console.log(this.checkBoxData, '遍历之前的')
    this.checkBoxData = tempArr
    console.log(this.checkBoxData, '遍历之hou的')
  },

  methods: {
    // 全选所有子项
    handleCheckAll(val) {
      this.checkBoxData.forEach((item, index) => {
        this.handleCheckAllChange(val, index)
        this.checkBoxData[index].checkAll = val
      })
    },
    // 子项的全选change事件
    handleCheckAllChange(val, index) {
      console.log(val)
      this.checkBoxData[index].checkedCities = (val
        ? this.checkBoxData[index].options
        : []
      ).map(item => item.value)
      this.checkBoxData[index].isIndeterminate = false
      this.TopCheckBoxCheck()
    },
    // 子项change事件
    handleCheckedCitiesChange(value, index) {
      console.log(this.checkBoxData[index].checkedCities)
      const checkedCount = value.length
      this.checkBoxData[index].checkAll =
        checkedCount === this.checkBoxData[index].options.length
      this.checkBoxData[index].isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.checkBoxData[index].options.length
      this.TopCheckBoxCheck()
    },
    TopCheckBoxCheck() {
      const allSelectLen = this.checkBoxData.filter(item => item.checkAll)
        .length

      if (allSelectLen === this.checkBoxData.length) {
        this.checkAll = true
        this.isIndeterminate = false
      } else {
        this.checkAll = false
        this.isIndeterminate =
          this.checkBoxData.findIndex(item => item.isIndeterminate) >= 0 ||
          this.checkBoxData.findIndex(item => item.checkAll) >= 0
      }
    },
    handleCheck() {
      const res = this.checkBoxData.map(item => {
        if (item.checkedCities && item.checkedCities.length > 0) {
          return item.checkedCities
        }
      })
      console.log(res.flat())
      const result = res
        .flat()
        .filter(item => {
          if (item) {
            return item
          }
        })
        .join()
      console.log(result)
    },
  },
}
</script>
<template>
  <section class="Overall" v-if="checkBoxData && checkBoxData.length > 0">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAll"
      >全选</el-checkbox
    >
    <br /><br /><br />
    <div v-for="(item, index) in checkBoxData" :key="index">
      <el-checkbox
        :indeterminate="item.isIndeterminate"
        v-model="item.checkAll"
        @change="
          val => {
            handleCheckAllChange(val, index)
          }
        "
        >{{ item.title }}</el-checkbox
      >
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group
        v-model="item.checkedCities"
        @change="
          val => {
            handleCheckedCitiesChange(val, index)
          }
        "
      >
        <el-checkbox
          v-for="option in item.options"
          :label="option.value"
          :key="option.value"
          >{{ option.label }}</el-checkbox
        >
      </el-checkbox-group>
      <br />
      <br />
      <br />
    </div>
    <br /><br /><br />
    <el-button :style="{ 'margin-left': '100px' }" @click="handleCheck"
      >提交</el-button
    >
  </section>
</template>
<style lang="less">
.Overall {
}
</style>