Element tree control el-tree realizes one-click all and reverse selection functions

<el-checkbox size="mini" :indeterminate="isIndeterminate" v-model="checkAll" 
@change="handleCheckAllChange" style="padding:0px;margin-right:5px;">
Select all</el-checkbox>

<el-tree ref="testingTree" :data="testingData" :props="testingProps" 
show-checkbox @check-change="testCheckChange" node-key="path" />

//Select all with one click    let checkAll = ref(false) //Binding value of select all button    let isIndeterminate = ref(false) //Select all buttons, half-select style    const testingTree = ref(null) //Use ref to get elements in vue3 requires declaring a variable with the same name in the setup    //1.1 Get the currently selected node    function testCheckChange() {
      // Get an instance of the Tree component. Use the variable declared by ref to add .value when used in the logical code.      const tree = ; 
      let checkedCount = 0;//The number of first-level nodes selected      let disabledCount = 0;//The number of first-level nodes that are placed in gray      let indeterminateFlag = false;//Is there any first-level node in the semi-selected state      //Transfer all first-level nodes (testingData is the el-tree component: the value of data)      for (let i = 0; i < ; i++) {
    //GetNode is an instance method of el-tree component. You can get the node in the Tree component based on data or key        if (([i]).disabled == true) {
          disabledCount += 1;//If there is a graying node, add 1 to the graying variable        }
        if (([i]).checked == true) {
          checkedCount += 1;//If there is a checked node, add 1 to the check variable.        }
        if (([i]).indeterminate == true) {
          indeterminateFlag = true;//If there is a half-selected node, the half-selected variable is set to true        }
      }
      if (checkedCount == 0) {
         = false;
         = false;//If the number of first-level nodes selected is 0, the selection of all button style is not half-selected, and the selection of all value is false        if (indeterminateFlag == true) {//If there is half-select below, set the style of the select all button to half-select style           = true;
           = false;
        }
      }
      else if ((checkedCount + disabledCount) == ) {//If the sum of the selected and grayed-on-tagged on the tree is equal to the length of data on the tree, set the selected button style to not be half-selected style, and the selected value is true         = false;
         = true;
      }
      else {//If the above conditions are not met, it means that all are not checked. Set the style to half-select, and the value of all is false         = true;
         = false;
      }
      return;
    }
//The method event on the select all button    function handleCheckAllChange(val) {
       = false;//Set the select all button style not half-select      if ( == true) {
//If the current value is selected, check it through the nodes in turn, and the filtered disabled is true        for (let i = 0; i < ; i++) {
          if (([i]).disabled == false) {
            ([i].path, true, true);
          }
        }
      }
      else {
//Cancel all selection is empty        ([])
      }

<template>
  <div>
    <el-checkbox size="mini" :indeterminate="isIndeterminate"  v-model="new_task_form.case_checkAll" @change="handleCheckAllChange" style="padding:0px;margin-right:5px;">Select all</el-checkbox>
  </div>
  <el-tree
     style="max-height: 200px;overflow: auto;"
     :data="casedata"
     show-checkbox
     :default-expand-all="false"
     node-key="id"
     ref="casetree"
     highlight-current
     :props="defaultPorps"
      @check-change="case_check_change">
   </el-tree>
</template>

data(){
    return {
        new_task_form:{
            "case_checkAll":false //Binding value of select all button        },
        isIndeterminate:false,//Select all buttons, half-select style    }
},
methods:{
    case_check_change(node1,node2,node3){//Tree node check event            let checked_count = 0;//The number of first-level nodes selected            let disabled_count = 0;//The number of first-level nodes that are placed in gray            let indeterminate_flag = false;//Is there any first-level node in the semi-selected state            //Travel through all first-level nodes            for(let i=0;i<;i++){
                if(this.$([i]).disabled==true){
                    disabled_count += 1;//If there is a graying node, add 1 to the graying variable                }
                if(this.$([i]).checked==true){
                    checked_count += 1;//If there is a checked node, add 1 to the check variable.                }
                if(this.$([i]).indeterminate==true){
                    indeterminate_flag = true;//If there is a half-selected node, the half-selected variable is set to true                }
            }
            if(checked_count==0){
                 = false;
                this.new_task_form.case_checkAll = false;//If the number of first-level nodes selected is 0, the selection of all button style is not half-selected, and the selection of all value is false                if(indeterminate_flag==true){//If there is half-select below, set the style of the select all button to half-select style                     = true;
                    this.new_task_form.case_checkAll = false;
                }
            }
            else if((checked_count+disabled_count)==){//If the sum of the selected and grayed-on-tagged on the tree is equal to the length of data on the tree, set the selected button style to not be half-selected style, and the selected value is true                 = false;
                this.new_task_form.case_checkAll = true;
            }
            else{//If the above conditions are not met, it means that all are not checked. Set the style to half-select, and the value of all is false                 = true;
                this.new_task_form.case_checkAll = false;
            }
            return;
        },
        handleCheckAllChange(val){//The method event on the select all button             = false;//Set the select all button style not half-select            if(this.new_task_form.case_checkAll==true){//If the current value is selected, check it through the nodes in turn, and the filtered disabled is true                for(let i=0;i<;i++){
                    if(this.$([i]).disabled==false){
                        this.$([i].id,true,true);
                    }
                }
            }
            else{//The current value is not selected all, set the checklist to empty                 this.$([]);
            }
        },
}