在el-tree中显示数据

树形组件中的data绑定的数据必须是树形格式的数据，如下所示

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

而我们后台拿到的数据一般都是平铺的，所以我们要将其转换为树形结构，具体如何转换可以看我前面的文章。

<!-- 树形结构数据展示 -->
<el-tree
    :data="permissionData"
    // :props="{ label: 'name' }"这样写是因为树形组件只识别label来当作名称，
    //不识别name所以我们要把data中的name属性替换为label
    :props="{ label: 'name' }"
/>

属性配置

想去官网看的这有链接
https://element.eleme.cn/#/zh-CN/component/tree#scoped-slot

el-tree进一步设置实现以下功能：

1. 显示选择框---------show-checkbox 显示选择框
2. 默认全部展开-------- default-expand-all 默认展开
3. 关闭父子关联---------check-strictly 设置true，可以关闭父子关联

<!-- 权限点数据展示 -->
      <el-tree
        :data="permissionData"
        :props="{ label: 'name' }"
         default-expand-all
        :show-checkbox="true"
        :check-strictly="true"
      />

default-expand-all写法等价于:default-expand-all="true"

将数据回填到el-tree中

已经获取到了数据了，如何把它填充到el-tree中，让某些个复选框处于选中状态？

答： setCheckedKeys + node-key

1. 给tree补充属性node-key

<!-- 权限点数据展示 -->
    <el-tree
      ref="refTree"
      :data="permissionData"
      :props="{ label: 'name' }"
      :default-expand-all="true"
      :show-checkbox="true"
      :check-strictly="true"
+     node-key="id"
    />

2. 调用方法回填数据

// 获取角色现有的权限
    async loadRoleDetail() {
      const res = await getRoleDetail(this.roleId)
      console.log('获取角色现有的权限', res.data.permIds)

      // 回填
      this.$refs.refTree.setCheckedKeys(res.data.permIds)
    },

小结

业务：在el-tree组件中通过setCheckedKeys方法 + node-key将数据 回显到el-tree组件中：处于选中状态