element-ui_el-tree_树形结构

element-ui_el-tree_树形结构

---

目录

---

---

内容

---

1、简介

应用场景：树形结构或者层级数据的简单展示

2、详解

常用属性

名称 类型 取值 默认值 描述 data array - - 被渲染的数据 node-key string - - 节点的唯一标志 props object - - 配置项，见prop详细 load boolean - false 加载子级数组，当lazy为true是有效 default-expand-all boolean - true 是否默认全部展开 default-expended-keys array - - 默认展开项的key数组，前提设置node-key show-checkbox boolean - false 是否显示多选框 check-strictly boolean - false 父级与子级关联绑定 accordion boolean - false 是否同级只展示1个 lazy boolean - false 是否开启懒加载

props配置

名称 类型 取值 默认值 描述 label string,function(data,node) - - 指定对象的哪个属性做标签使用 children string - - 指定对象的哪个属性为子级数据 isLeaf boolean,function(data,node) - - 是否是叶子节点

常用方法

名称 参数 描述 getCheckedKeys leafOnly 获取选中节点的key数组 setCheckedKeys keys,leafOnly 设置选中的节点key数组 getHalfCheckedKeys 获取半选中节点key数组

常用事件

名称 参数 描述 node-click 点击节点触发 check-change 多选框选择改变触发

3、tree常见问题及解决方法

<el-tree ref="tree" :data="permList" :props="defaultProps" :check-strictly="checkStrictly" show-checkbox default-expand-all node-key="id" class="permission-tree" />

3.1、tree的回显

初始版本 使用属性，:default-checked-keys=“checkedIds”。 在触发弹出框之前，异步请求角色有的权限id数组，初始化checkedIds 问题，虽然效果实现了但是角色没有权限的回显也会显示之前有权限回显的数据 解决方法 改用属性:check-strictly=“checkStrictly” showAssign(id) { this.checkStrictly = true // this.checkedIds = [] this.assignForm.id = id; getPermsByRoleId(id).then(resp => { this.assignDialogVisible = true this.$refs.tree.setCheckedKeys(resp.permIds) this.checkStrictly = false }) }

如遇到新问题持续更新……

参考地址：

页面和后端完整代码在下面仓库中。

后记 ：

后端JAVA源代码地址:https://gitee.com/gaogzhen/ihrm-parent    // 后端项目
 前端项目源代码地址：https://gitee.com/gaogzhen/ihrm-vue    // 前端后台管理系统