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 }) }
-
如遇到新问题持续更新……
参考地址:
https://my.oschina.net/gmarshal/blog/1843526
https://blog.csdn.net/jasmine0178/article/details/103600508
页面和后端完整代码在下面仓库中。
后记 :
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
后端JAVA源代码地址:https://gitee.com/gaogzhen/ihrm-parent // 后端项目
前端项目源代码地址:https://gitee.com/gaogzhen/ihrm-vue // 前端后台管理系统