树形组件中的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进一步设置实现以下功能:
- 显示选择框---------show-checkbox 显示选择框
- 默认全部展开-------- default-expand-all 默认展开
- 关闭父子关联---------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
- 给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"
/>
- 调用方法回填数据
// 获取角色现有的权限
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组件中:处于选中状态