el-tree多个树进行节点同步联动(完整版)

2024.1.11今天我学习了如何对多个el-tree树进行相同节点的联动效果,如图:

el-tree多个树进行节点同步联动(完整版)_第1张图片

el-tree多个树进行节点同步联动(完整版)_第2张图片

el-tree多个树进行节点同步联动(完整版)_第3张图片

这边有两棵树,我们发现第一个树和第二个树之间会有重复的指标,当我们选中第一个树的指标,我们希望第二个树如果也有重复的指标也能进行勾选上,反之也是。

一、难点:

(1)要让父节点变成半选状态

这个组件比较复杂的地方是要通过选中的子节点,拿到另外一个树对应的父节点,直接通过getHalfCheckedKeys是不行的,因为你当前不是在另外一个树做操作,获取不到当前的父节点,所以只能通过递归子节点,拿到对应的父节点。

(2)要拿到选中的所有子节点数据

setCheckedKeys(data,check)的data是拿到当前选中的子节点数据,如果当前子节点数据含有children数据,我们也需要通过递归的方法拿到所有的子节点数据。

二、重点方法:

setCheckedKeys(data,check)//data为当前选中节点的数据   check为所有选中节点的数据

三、关键步骤如下:

(1)第一个树选中的节点数据赋值给第二个树回显。

(2)第二个树选中的节点拼接第一个树选中的节点并过滤第二个树去掉的节点。

四、完整代码如下:



可以直接复制demo查看效果。大家如果有不懂的地方或是更好的方法可以分享到评论区,谢谢!

你可能感兴趣的:(vue.js,elementui,javascript)