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的回显

• 初始版本

  1. 使用属性，:default-checked-keys=“checkedIds”。
  2. 在触发弹出框之前，异步请求角色有的权限id数组，初始化checkedIds

• 问题，虽然效果实现了但是角色没有权限的回显也会显示之前有权限回显的数据

• 解决方法

  1. 改用属性: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    // 前端后台管理系统