Tree 树形控件
使用场景:
- 多级分类
- 组织架构多级管理
- 知识或者文件夹层级组织方式
- 事物的归属关系
最近就遇到关于公司组织架构的应用场景,既要显示公司职员的树形组织架构,而且还可以勾选某个人进行资料的查询,并且支持多选
通过设置 el-tree
组件的 show-checkbox
属性为 true
,将节点置为可被选择状态。
这里的问题是怎么支持多选的问题,该组件 check-strictly
属性设置为 false
的时候,可选中父节点来选中所有下面的子节点。没有层级限制,一直到最终的叶子节点。而我们的需求是只想选中某一层级的节点。对于管理人员来说,他只关心下面最直接的下属,进行相关的操作。
我们拿到的树形数据结构如下:
我的做法是添加了 el-checkbox
组件,首先算出树形结构数据的最大深度值,然后循环输出所有的层级选择框
// 获取树形数据的最大深度值 getMaxFloor(treeData) { let deep = 0 let deepEach = (data, floor) => { data.map(item => { item.floor = floor if (floor > deep) { deep = floor } if (item.subOrdinate && item.subOrdinate.length > 0) { deepEach(item.subOrdinate, floor + 1) } }) } deepEach(treeData, 1) return deep }
接下来就是通过选中层级,找出该深度下的所有员工,以数组的形式进行存储
// 根据深度值查找该深度下的所有节点 getChildByIndex(treeData, deep) { let max = 0 let arr = [] let deepEach = (data, floor) => { data.map(item => { item.floor = floor if (item.floor === deep) { arr.push(item.value) } if (floor > max) { max = floor } if (item.children && item.children.length > 0) { deepEach(item.children, floor + 1) } }) } deepEach(treeData, 1) return arr }
el-tree
控件的 default-checked-keys
属性可以设置默认选中的节点,我们通过改变这个值来间接达到选中的目的。default-expanded-keys
属性为展开节点的控制值,当我们选中某个节点的时候,为了能直接看到该节点,还需要展开与它相关的上级所有的节点。
最后我们监听 checkbox
的值(所有选中值组成的数组),循环层级数组,通过获取某个层级的节点,拼接成最终所有的节点,然后通过该组件内部方法 setCheckedKeys
来设置选中状态。
selectMulti(val) { const treeData = this.employeeOptions let selectedEmployee = [] val.sort().forEach((el, index) => { let level = this.getChildByIndex(treeData, el) selectedEmployee = selectedEmployee.concat(level) }) this.defaultExpandKeys = this.getChildByIndex(treeData, val[val.length - 1] - 1) this.$refs.employeeTree.setCheckedKeys(selectedEmployee) this.employeeAccounts = Array.from(new Set(selectedEmployee)) this.getEmployeeDocuments() }
这里需要注意的是控制展开的数组值,当我们选中二级时,所有的一级应该展开,选中三级,二级所有的节点应该展开,依次类推。
我们拿到选中层级数组,算出里面的最大层级,然后通过最大层级的值减去1算出该层级下的所有节点,就可以展开所有选中节点。(这里有个规则就是展开深度大的节点时外层节点一定是展开的)