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

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

遇见问题：

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

往期文章

个人主页

最近有了新的需求，要求可以展示一棵机构树，然后可以选择某些节点。所选节点如果它和它的兄弟节点都被选中，那么所选结果就是它们的父节点。

如下例子：

选择三级1-1-1、三级1-1-2（或二级1-1），所得结果为一级1；选择二级2-1、二级2-2，所得结果一级2

项目使用Element UI框架，查找了tree组件对外接口，没有提供，然后自己结合tree组件的方法实现一下

在点击某个节点，选择状态完成更新后的回调函数中，判断当前点击节点的父节点是否选中，若选中，就把该父节点下的所有子节点从结果数组中移除，把当前节点加入结果数组，然后判断该父节点的父节点是否选中，循环上述步骤直到它们的根节点或状态为未选中；若该父节点未选中，检查当前节点状态是否为选中，选中，则加入结果数组，否则就认为是当前点击 *** 作取消了之前的选中状态，那么就需要在结果数组中删除当前点击项，考虑到之前可能是点击节点的父节点被选中状态，所以需要针对这个情况，需要在结果数组中删除父节点项，加入除当前点击项外的兄弟节点项（因为结果数组中存储的是最高一层的所选节点，所以不需要处理点击项的子节点）

tree组件中

使用方法

展示时删除某一选中项

当tree是可选择的时候，也就是说为“show-checkbox”属性时，这个组件默认是点击复选框实现选中状态，但是如果是想点击节点实现复选框的选中则可以设置：

实现需求：如果页面中得到的是“text”，字符串的true，但我们想要传布尔类型的true时候：

---