element tree 默认勾选已知id

个人日常记录，方便查阅

      <el-tree
        ref="tree"
        :data="treeData"
        show-checkbox
        accordion
        :props="treeProps"
        node-key="resourceId"
        :default-expanded-keys="defaultCheckedKeys"
        :default-checked-keys="defaultCheckedKeys"
      >
      </el-tree>

data() {
    return {
      // 树结构
      treeData: [],
      // 树结构以什么展示
      showType: 2,
      treeProps: {
        children: "children",
        label: "resourceName",
      },
      defaultCheckedKeys: [], // 默认勾选
    };
  },

methods:{
   // 获取部门权限详细 permissions
    async getPermissions() {
      const { data } = await permissions({ deptId: this.params.deptId });
/**
 * {"data":[{"systemId": 1,
"systemName": "统一后台管理系统",
"systemShortName": "统一后台管理系统","systemResource":[{
"parentId": -1,
"resourceId": 1,
"resourceName": "首页",
"sortNumber": 10,
"systemId": 1,
"systemName": "统一后台管理系统",
"systemShortName": "统一后台管理系统"
},{
"parentId": -1,
"resourceId": 2,
"resourceName": "组织用户管理",
"sortNumber": 20,
"systemId": 1,
"systemName": "统一后台管理系统",
"systemShortName": "统一后台管理系统"
},]}]}
 */

      data.forEach((v) => {
        this.getPermissionId(v, this.defaultCheckedKeys);
      });
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
      });
    },
	    // 递归获取默认展示的 key
    getPermissionId(node, arr) {
      if (!node.systemResource) {
        return arr.push(node.resourceId);
      }
      node.systemResource.forEach((item) => {
        this.getPermissionId(item, arr);
      });
    },
}

标签：node,arr,管理系统,resourceId,tree,element,勾选,后台,data
来源： https://blog.csdn.net/qq_36364963/article/details/112231463