The vue tree table structure checks the corresponding options according to the json data.

using the element tree table component, displaying the data is different from what you think.

clipboard.png
json
clipboard.png
this click shows the data table, but it does not show the options that are checked by default according to the logic I wrote.
user modules should all be checked by default, because flag is true, and when flag is true, it is checked, and it is not checked when it is false, but

is used.
setCheckedNodes(row) {
      this.roleId = row.id;
      RoleList({
        roleId: this.roleId
      })
        .then(res => {
          this.dialogFormVisible = true;
          if (res.code == 0) {
            this.$refs.tree.setCheckedNodes([{flag:true}]);
            this.roleStree = res.data;
          }
        })
        .catch(err => {});
    },

Logic

<el-tree
          :data="roleStree"
          show-checkbox
          node-key="id"
          highlight-current
          default-expand-all
          ref="tree"
          :props="defaultProps"
        ></el-tree>

here I quote an official example

Why didn"t it work? The official method used here does not show the effect I want

May.17,2022

clipboard.png
wrong parameter


wrote a simple reference, using setCheckedKeys
Preview: https://jsfiddle.net/szjarph9/
core method to recursively get a subset of flag as true, and then select

by setCheckedKeys setting.
getCheckedKeys(data){
      data.forEach(item => {
        //flagtrueelement-tree
        if(item.flag === true && !item.children){
          this.checkedKeys.push(item.id)
      }
      if(item.children && item.children.length){
          //
          this.getCheckedKeys(item.children)
      }
    })
  }
Menu