VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选

html部分

<template>
  <div class="hello">
    <el-form :model="elForm">
<!-- cities对象数组形式 -->
      <el-form-item v-for="(item, topIndex) in cities" :key="topIndex">
<!--item.checked 是每一个item的勾选状态，字段里可以没有  -->
        <el-checkbox class="textCheck" :indeterminate="item.indeterminate" v-model="item.checked" @change="onChangeTop(topIndex, item.tagParamId, $event, item)">{
  { item.tagParamName }}</el-checkbox>
<!-- dialogCheckedCities是空对象，保存勾选的每一个子选项的数据集合 -->
        <el-checkbox-group v-model="dialogCheckedCities">
<!-- city.needAlarm子选项的needAlarm字段，true/false -->
          <el-checkbox v-for="city in item.tagKnowledgeRule" v-model="city.needAlarm" :key="city.tagKnowledgeId" :label="city" @change="onChangeSon(topIndex, city.tagKnowledgeId, item.tagParamId, $event, item, city)">{
  { city.tagKnowledgeName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <el-button @click="getArr">点击</el-button>
  </div>
</template>

data数据部分

 data() {
    return {
      cities: [
        {
          tagParamId: '1759763720885637120',
          tagParamName: '报警1',
          tagKnowledgeRule: [
            {
              tagKnowledgeId: 'fu1zi1',
              tagKnowledgeName: '统计报表',
              needAlarm: true
            },
            {
              tagKnowledgeId: 'fu1zi2',
              tagKnowledgeName: '统计',
              needAlarm: true
            },
            {
              tagKnowledgeId: 'fu1zi3',
              tagKnowledgeName: '报表',
              needAlarm: true
            }
          ]
        },
        {
          tagParamId: '报警2',
          tagParamName: '文字档案2',
          tagKnowledgeRule: [
            {
              tagKnowledgeId: 'fu2zi1',
              tagKnowledgeName: '好好学习',
              needAlarm: false
            },
            {
              tagKnowledgeId: 'fu2zi2',
              tagKnowledgeName: '学习',
              needAlarm: true
            }
          ]
        },
        {
          tagParamId: '报警3',
          tagParamName: '文字档案3',
          tagKnowledgeRule: [
            {
              tagKnowledgeId: 'fu3zi1',
              tagKnowledgeName: '上班',
              needAlarm: false
            },
            {
              tagKnowledgeId: 'fu3zi2',
              tagKnowledgeName: '一直上班',
              needAlarm: false
            }
          ]
        }
      ],
      dialogCheckedCities: [],
      elForm: {}
    }
  },

JS脚本部分/重要

<template>
  <div class="hello">
    <el-form :model="elForm">
      <el-form-item v-for="(item, topIndex) in cities" :key="topIndex">
        <el-checkbox class="textCheck" :indeterminate="item.indeterminate" v-model="item.checked" @change="onChangeTop(topIndex, item.tagParamId, $event, item)">{
  { item.tagParamName }}</el-checkbox>
        <el-checkbox-group v-model="dialogCheckedCities">
          <el-checkbox v-for="city in item.tagKnowledgeRule" v-model="city.needAlarm" :key="city.tagKnowledgeId" :label="city" @change="onChangeSon(topIndex, city.tagKnowledgeId, item.tagParamId, $event, item, city)">{
  { city.tagKnowledgeName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <el-button @click="getArr">点击</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    this.cities.forEach(item => {
      // 回显为true的数据
      item.tagKnowledgeRule.forEach(items => {
        if (items.needAlarm) {
          this.dialogCheckedCities.push(items)
        }
      })
      //回显全选
      item.checked = item.tagKnowledgeRule.every(ele => {
        return ele.needAlarm === true
      })
    })
  },
  data() {
    return {
      cities: [
        {
          tagParamId: '1759763720885637120',
          tagParamName: '报警1',
          tagKnowledgeRule: [
            {
              tagKnowledgeId: 'fu1zi1',
              tagKnowledgeName: '统计报表',
              needAlarm: true
            },
            {
              tagKnowledgeId: 'fu1zi2',
              tagKnowledgeName: '统计',
              needAlarm: true
            },
            {
              tagKnowledgeId: 'fu1zi3',
              tagKnowledgeName: '报表',
              needAlarm: true
            }
          ]
        },
        {
          tagParamId: '报警2',
          tagParamName: '文字档案2',
          tagKnowledgeRule: [
            {
              tagKnowledgeId: 'fu2zi1',
              tagKnowledgeName: '好好学习',
              needAlarm: false
            },
            {
              tagKnowledgeId: 'fu2zi2',
              tagKnowledgeName: '学习',
              needAlarm: true
            }
          ]
        },
        {
          tagParamId: '报警3',
          tagParamName: '文字档案3',
          tagKnowledgeRule: [
            {
              tagKnowledgeId: 'fu3zi1',
              tagKnowledgeName: '上班',
              needAlarm: false
            },
            {
              tagKnowledgeId: 'fu3zi2',
              tagKnowledgeName: '一直上班',
              needAlarm: false
            }
          ]
        }
      ],
      dialogCheckedCities: [],
      elForm: {}
    }
  },
  methods: {



    //点击的''全部''(全选)
    onChangeTop(index, tagParamId, e, item) {
      //点击的谁的下标，对应的id，点击的true/false状态，点击的这个对象所有的数据
      //父级change事件
      this.cities[index].checked = e 
      if (e == false) this.cities[index].indeterminate = false //去掉不确定状态

     //父级勾选后，子级全部勾选或者取消
	//这里注意是选取一级下的二级数据，也是所有子选项的数据集合
      var childrenArray = this.cities[index].tagKnowledgeRule 
	//某一个对象下子选项的数组集合长度
      // var len = childrenArray.length
	//如果某一个勾选的对象的checked状态为true，就是全选状态时
      if (this.cities[index].checked == true) {
        // 点击全选往v-model添加选中的
	//dialogCheckedCities里面把某一个对象下的二级子选项全部放入dialogCheckedCities里，这是点击全部，勾选全部子数据的
	// :label="city"  想控制全选要看你子选项的label绑定的是什么，此处我绑定的是对象，所以说下方要塞入对象
	//dialogCheckedCities是存放的勾选的数据，里面有什么，就勾什么
        for (var i = 0; i < childrenArray.length; i++) this.dialogCheckedCities.push(childrenArray[i])
      } else {
        //取消全选删除重复的id
	//从 this.dialogCheckedCities 中移除那些在 childrenArray 中存在的元素。
	//childrenArray.some() 意思是，如果有一项数据相同，返回true，保存，如果都不相同，返回false，过滤
	// ！childrenArray.some() 意思是，如果有一项数据相同，返回false，都不相同，返回true
	//dialogCheckedCities的数据过滤，如果childrenArray里的数据和它的每一项都相同，返回false，表示不保存，直接过滤掉
        this.dialogCheckedCities = this.dialogCheckedCities.filter(item => !childrenArray.some(ele => ele === item))
      }
    },
    onChangeSon(topIndex, sonId, topId, e, item, city) {
      console.log('点击的儿子', topIndex, sonId, topId, e, item, city)
      //子级change事件
      var childrenArray = this.cities[topIndex].tagKnowledgeRule //这里注意是选取一级下的二级数据
      var tickCount = 0,
        unTickCount =