element-ui的Tree树组件使用技巧

Posted 2023-02-28

参考技术A

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

遇见问题：

问题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

往期文章

个人主页