iviewUI Checkbox 多选框 多组全选或者全不选的问题

1.需求：点击类别，可以全选或者全部取消；选中当全选下面的子选项，父类型要跟着选中

2.应用场景：一般常用于权限列表多层勾选

3.解决思路 ：单独封装一个多组全选的组件，这样就解决了其他类别同时被选中的问题

父组件：

<Modal
        width="900"
        v-model="modalAuthority"
        title="权限列表"
        @on-ok="handleAuthoritySubmit"
        @on-cancel="closeModal"
      >
        <Form :label-width="100" ref="formValidate2" :model="formValidate2">
          <div v-for="(items,key) in authorityList" :key="key">
            <FormItem>
              <div>
                <span style="font-weight: 600;">{{items.title}}</span>
                <div v-for="(singleList,index) in items.child" :key="index">
                  <authority-list :single-list="singleList" :title="singleList.title" :icon="singleList.name"
                                  @checkedChild="getChildCheck"></authority-list>
                </div>
              </div>
            </FormItem>
          </div>
        </Form>
      </Modal>


<script>
methods: {
    // 监控选中了哪一项
    getChildCheck (icon, val) {
      this.checkedObj[icon] = val
    },
    //  点击权限列表中的确定按钮
    handleAuthoritySubmit () {
        //todo
    }
}

 
</script>

子组件：创建一个authority-list.vue 子组件

<template>
    <div style="margin-left: 10px">
      <CheckboxGroup>
        <Checkbox
          class="checkbox-style"
          :indeterminate="indeterminate"
          :value="checkAll"
          :label="singleList.name"
          @click.prevent.native="handleCheckAll(singleList.child)"><span style="font-weight: 600;">{{title}}</span>
        </Checkbox>
      </CheckboxGroup>
      <CheckboxGroup v-model="checkAllSingleGroup" @on-change="checkAllSingleGroupChange">
        <Checkbox  class="checkbox-style" style="margin-left: 20px"
                   v-for="single in singleList.child"
                   :key="single.name"
                   :label="single.inp_value">
          <span>{{single.title}}</span>
        </Checkbox>
      </CheckboxGroup>
    </div>
</template>
<script>
export default {
  name: 'AuthorityList',
  props: ['singleList', 'title', 'icon', 'checkedAuth'],
  data () {
    return {
      checkboxSize: 0,
      indeterminate: false,
      checkAll: false,
      checkAllSingleGroup: [],
      newArr: []
    }
  },
  watch: {
    'checkAllSingleGroup': function (val) {
      this.$emit('checkedChild', this.icon, val)
    },
    'checkedAuth': function (val) {
      // console.log(val)
      this.checkAllSingleGroup = []
      this.singleList._child.forEach(item => {
        val.map(value => {
          if (value === item.name) {
            this.checkAllSingleGroup.push(value)
          }
        })
      })
      this.checkAllSingleGroupChange(this.checkAllSingleGroup)
    }
  },
  methods: {
    handleCheckAll (arr) {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      let singleCheckedGroup = []
      let singleObj = {}
      if (!Array.isArray(arr)) {
        return
      }
      if (arr.length === 0) {
        this.$emit('checkedMenuChange', this.icon, this.checkAll)
        return
      }
      for (let i = 0; i < arr.length; i++) {
        singleObj = arr[i]
        singleCheckedGroup.push(singleObj.name)
      }

      if (this.checkAll) {
        this.checkAllSingleGroup = singleCheckedGroup
      } else {
        this.checkAllSingleGroup = []
      }
    },
    checkAllSingleGroupChange (data) {
      if (data.length === this.singleList._child.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    }
  }
}
</script>

OK，收工！如果可以实现记得点赞分享，谢谢老铁～