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);
      });
    },
}

你可能感兴趣的:(vue,elementui)