Element UI Tree 树形控件根据层级全选控制

使用场景：

最近就遇到关于公司组织架构的应用场景，既要显示公司职员的树形组织架构，而且还可以勾选某个人进行资料的查询，并且支持多选

通过设置 el-tree 组件的 show-checkbox 属性为 true ，将节点置为可被选择状态。

这里的问题是怎么支持多选的问题，该组件 check-strictly 属性设置为 false 的时候，可选中父节点来选中所有下面的子节点。没有层级限制，一直到最终的叶子节点。而我们的需求是只想选中某一层级的节点。对于管理人员来说，他只关心下面最直接的下属，进行相关的 *** 作。

我们拿到的树形数据结构如下：

我的做法是添加了 el-checkbox 组件，首先算出树形结构数据的最大深度值，然后循环输出所有的层级选择框

接下来就是通过选中层级，找出该深度下的所有员工，以数组的形式进行存储

el-tree 控件的 default-checked-keys 属性可以设置默认选中的节点，我们通过改变这个值来间接达到选中的目的。 default-expanded-keys 属性为展开节点的控制值，当我们选中某个节点的时候，为了能直接看到该节点，还需要展开与它相关的上级所有的节点。

最后我们监听 checkbox 的值（所有选中值组成的数组），循环层级数组，通过获取某个层级的节点，拼接成最终所有的节点，然后通过该组件内部方法 setCheckedKeys 来设置选中状态。

这里需要注意的是控制展开的数组值，当我们选中二级时，所有的一级应该展开，选中三级，二级所有的节点应该展开，依次类推。

我们拿到选中层级数组，算出里面的最大层级，然后通过最大层级的值减去1算出该层级下的所有节点，就可以展开所有选中节点。（这里有个规则就是展开深度大的节点时外层节点一定是展开的）

最近这段时间在做一个新的模块，其中有一个三层的树结构，产品经理提出了一个很古怪的需求，整的我只能自己控制树的交互，写完之后，感觉对这个组件的用法有了不一样的了解，故而写下来。

遇见问题：

问题1 ：后端数据不友好，无唯一 key 值（有重复 key ），导致 Tree 组件无唯一的 key

问题2 ：后端数据不友好，第一层第二层的字段和第三层的字段不一致（第一层字段是 dept_id ，子集字段是 children ，第二层子集字段是 porjs ，第三层字段又是 porj_id ）

问题3 ：不能使用 check-strictly ，也就是 Tree 组件自带的父子关联，只能手动控制 checkbox 的选中状态

问题4 ：提交给后端的数据，如果一级二级节点被勾选，则不用传递其下层结构，如果不是被勾选，则需要传递其下层结构

如图：

不过还好这个树结构只有三层，办法还是有的。（如果是未知层级就难了）

问题1 ：无唯一 key 值

这个好办，接口请求到数据之后，深拷贝一份，遍历一下，给 id 手动添加字符来使它们变成唯一的，最后提交的时候去掉前面添加的字符

问题2 ：第一层第二层的字段和第三层的字段不一致

这个也好办，最好的办法是后端调整成一样的，但是如果碰见博主这样的无法沟通的后端，只能前端自己转换字段了，这里采用的是 forEach 遍历，然后使用 map 替换对象键名。

问题3 ：不能使用 check-strictly

这个就比较繁琐了，不能使用 Tree 自带的勾选父子关联（原因看需求2），只能自己手写一二三级节点的勾选逻辑。这样的话，二级和三级节点需要有个 parent_id 字段，也就是其父级的 id ，且有一个 depth 字段，代表其深度 1，2，3 。

给 Tree 组件加上 ref 属性，设置 check-strictly 为 true ，利用 @check-change 监听节点勾选，利用 @node-expand 监听节点展开收起，设置 node-key 为每个节点的 id 。

思路是：通过 @check-change 的回调，拿到第一个参数 data ，这个 data 里包含该节点的数据，通过这个数据可以拿到 depth 判断他是第几层节点，还可以拿到 parent_id 找到它的上级节点。根据这个区分一二三级节点，然后通过获取到的id，使用 this.$refs.tree.getNode(id) 可以获取到节点 Node 。设置节点 Node 的 checked 为 true ，则该节点会变成勾选状态。设置它的 indeterminate 为 true ，则会变成选中状态，设置 expanded 为 true ，则是展开状态。也可以通过 this.$refs.tree.setChecked(id, true) 来设置选中。

问题4 ：提交给后端的数据

这个就是坑了，需要先把之前改变的 key 变回去，还有子级的键名改回去，然后根据是勾选还是只是单纯的选中来拼接数据。在这里用到了 getCheckedNodes 来获取目前被选中的节点所组成的数组，也用到了 getHalfCheckedNodes 获取半选中的节点所组成的数组。

获取转换后的结构：

提交转换后的结构：

如果你有用到Tree组件，且产品出的需求不咋地，可以看看Tree常用这些方法技巧；

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

在项目开发中，使用了element-UI，一个需求是这样的：快速展开树形结构。在树形结构上，采用的element-UI的tree树形结构，但是在完成这个需求中，发现了一个很严重的缺陷，导致需求无法实现：

快速展开时，只需要往default-expanded-keys中添加值即可实现快速展开，但是，在切换展开层级时，想要除选择的层级展开外，其余层级全部回折，于是清除default-expanded-keys中的元素，可是这种方法无法实现回折，需求无法实现......

在经过一系列的尝试之后，终于找到解决方案，但是方法比较粗糙（暂未找到其他好的解决方案）：

首先新创建一个变量进行树形结构的存储（以下写法为了解决浅拷贝问题）：

然后再发现选择更改时，将记录的数值清空掉，然后根据选择的不同，重新给default-expanded-keys赋值，之后再给树形结构赋值，进行重新的渲染，即：

采用这种方式，即可实现，展开二级结构之后，再次选择展开以及结构，则二级结构则会自动回折。

---