need to implement a check box, click Select all, select all subitems, cancel and do not show. In group a, both A1 and check a2 and a3 were selected, and group a was true. All selected children need to be displayed externally.

true,false is passed when the change event is triggered. Checkedcitys displays the content for the second-level check box, and when the second-level check box change event is triggered, pass v-model. Traversal shows that children is all the third-level check boxes. The first and second levels have been implemented. When all the third-level change events are selected, I don"t know how to make the second-level menu true

<template>
  <div class="hello">
    <div>
      <ul v-for="(child,index) in children" :key="index">
        <li style="float:left;list-style:none">{{child.label}}</li>
      </ul>
    </div>
    <div style="margin-left:10px">
      <div>
        <el-checkbox v-model="checkall" @change="changeAll"></el-checkbox>
      </div>
      <el-checkbox v-model="checkedcitys" v-for="(group,index) in model" :label="group" :key="index" @change="changeSecond(checkedcitys)">
        <div @mouseover="overShow(index)" @mouseout="outHide(index)">{{group.label}}
          <div v-if="index===showIndex" style="z-index:222;position:absolute;border:1px solid -sharp8E8E8E;background:-sharpfff;width:50px;height:80px;margin-left:25px;margin-top:-20px">
            <el-checkbox v-model="children" v-for="(child,item) in group.children" :label="child" :key="item" @change="changeThird(child)">
              {{child.label}}
            </el-checkbox>
          </div>
        </div>
      </el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkall: false,
      children:[],
      model:[
        { label: "A", children: [
          {father:"A",label:"a1"},
          {father:"A",label:"a2"},
          {father:"A",label:"a3"},
        ] },
        { label: "B", children: [
          {father:"B",label:"b1"},
          {father:"B",label:"b2"},
          {father:"B",label:"b3"},
        ] },
        { label: "C", children: [
          {father:"C",label:"c1"},
          {father:"C",label:"c2"},
          {father:"C",label:"c3"}] },
        { label: "D", children:[
          {father:"D",label:"d1"},
          {father:"D",label:"d2"}
            ] },
        ],
      checkedcitys: [],
      checkchild: false,
      showIndex:-1
    };
  },
  methods: {
    changeAll: function(val) {
      this.checkedcitys = val? this.model:[];
      this.changeSecond(this.checkedcitys)
    },
    changeSecond: function(val) {
      console.log(val,3);
      let arr=[];
      let checkedCount = Object.keys(val).length;
      this.children =checkedCount >0 ? this.children :[];
      for(let i=0;i<checkedCount;iPP){
      arr=  arr.concat(val[i].children);
      this.children = arr
      }
      //
      this.checkall = checkedCount=== this.model.length
    },
    changeThird:function(children){
      console.log(children,"child")
      let father="";
      let hehe = [];
      if (children.length>0){
        children.forEach(item=>{
          father=item.father;
          console.log(item.father,"hehe")
        });
        this.model.forEach(item=>{
          console.log(item,"item");
          console.log(father,"father");
         if(item.label==father){
           debugger
           console.log(father);
           if(item.children.length==children.length){
              console.log(this.checkedcitys,"5");
              console.log(item,"items");
              hehe.push(item);
//              console.log(this.checkedcitys,"hehe")
            }
         }
        });
      console.log(hehe,"cnm")
      }else{
        this.checkedcitys =[]
      }
      console.log(this.model,"model");
      console.log(this.children,"index");
      console.log(children,"children");
      console.log(this.checkedcitys,"")
      // if(this.model[val].children.length===this.children.length){
      //   console.log(this.children,"1")
      //   console.log(this.model[val],"2")
      // }else{

      // }
    // console.log(this.model[val].children.length===this.children.length)
    //   let checkedCount = Object.keys(val).length
    //   if(checkedCount=== this.children.length){
    //           this.checkedcitys = this.model[val]
    //   }
        // this.model[val] =
      // 

    },
    overShow: function(node) {
      this.showIndex = node

    },
    outHide: function(node) {
       this.showIndex = -1
    },
  }
};
</script>
<style scoped>
.el-checkbox + .el-checkbox {
  display: block;
  margin: 0;
}
</style>

Select the third level check box first, and now it looks like