I don't know if it is the result you want. The selected data returned by the backend contains both parent ID and subset ID,. First, the parent ID, is recursively extracted, then the parent ID, is deleted and finally rendered.
Preview: https://jsfiddle.net/gka8xtm2/

Hello, I am also using this component, but when I edit the backfill, as long as the parent is selected, the following will be selected. I don't know why. Could you take a look at it for me? Thank you

 getHovePer(row){
            let data = {
                id: row.id
            }
            hovePermiss(data).then( res => {
                if(res.info.ok == true){
                  let actionData = res.data;
                  // 
                  let selectArr = [];
                  for(var i in actionData){
                      let oneObj = {};
                      actionData[i].id = actionData[i].number;
                      if(actionData[i].status == 'on'){
                          oneObj.id = actionData[i].number;
                          oneObj.name = actionData[i].name;
                          selectArr.push(actionData[i].number);
                          actionData[i].switchStatus = true;
                      } else {
                          actionData[i].switchStatus = false;
                      }
                      //    
                      if(actionData[i].sub_rule.length > 0){
                          let twoArr = actionData[i].sub_rule;
                          for(var j in twoArr){
                            let twoObj = {};
                            twoArr[j].id = twoArr[j].number;
                            if(twoArr[j].status == 'on'){
                                twoObj.id = twoArr[j].number;
                                twoObj.name = twoArr[j].name;
                                selectArr.push(twoArr[j].number);
                                twoArr[j].switchStatus = true;
                            } else {
                                twoArr[j].switchStatus = false;
                            }
                            //  
                            if(twoArr[j].sub_rule.length > 0){
                                let threeArr = twoArr[j].sub_rule;
                                for(var k in threeArr){
                                  let threeObj = {};
                                  threeArr[k].id = threeArr[k].number;
                                  if(threeArr[k].status == 'on'){
                                       threeObj.id = threeArr[k].number;
                                       threeObj.name = threeArr[k].name;
                                       selectArr.push(threeArr[k].number);
                                       threeArr[k].switchStatus = true;
                                  } else {
                                       threeArr[k].switchStatus = false;
                                  } 
                                  //    
                                  if(threeArr[k].sub_rule.length > 0){
                                      let fourArr = threeArr[k].sub_rule;
                                      for(var l in fourArr){
                                          let fourObj = {};
                                        fourArr[l].id = fourArr[l].number;
                                        if(fourArr[l].status == 'on'){
                                            fourObj.id = fourArr[l].number;
                                            fourObj.name = fourArr[l].name;
                                            selectArr.push(fourArr[l].number);
                                            fourArr[l].switchStatus = true;
                                        } else {
                                            fourArr[l].switchStatus = false;
                                        }
                                        //  
                                        if(fourArr[l].sub_rule.length > 0){
                                           let fiveArr = fourArr[l].sub_rule;
                                           for(var f in fiveArr){
                                               let fiveObj = {};
                                               fiveArr[f].id = fiveArr[f].number;
                                               if(fiveArr[f].status == 'on'){
                                                   fiveObj.id = fiveArr[f].number;
                                                   fiveObj.name = fiveArr[f].name;
                                                   selectArr.push(fiveArr[f].number);
                                                   fiveArr[f].switchStatus = true;
                                               }else { 
                                                   fiveArr[f].switchStatus = false;
                                               }
                                           }
                                        }  
                                      }
                                  } 
                               }
                            }
                          }
                      }
                  }
                  console.log('----selectArr---',selectArr);
                  
                  this.$refs.tree.setCheckedKeys(selectArr);
                  this.hovePermissData = res.data;
                  console.log('----this.hovePermissData---',this.hovePermissData);
                }
            })
        },