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

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

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

一、难点:

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

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

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

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

二、重点方法:

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

三、关键步骤如下:

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

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

四、完整代码如下:

<template><div><el-treestyle="height: 30vh;overflow-y: scroll"node-key="id"ref="tree1":default-expand-all="true":props="defaultProps":data="tree_demo1"@check="tree_check1"show-checkbox><span slot-scope="{ node, data }">【{{ data.id }}】{{ data.label }}</span></el-tree><hr/><el-treenode-key="id"ref="tree2"style="height: 30vh;overflow-y: scroll":default-expand-all="true":props="defaultProps":data="tree_demo2"@check="tree_check2"show-checkbox><span slot-scope="{ node, data }">【{{ data.id }}】{{ data.label }}</span></el-tree></div>
</template>
<script>
export default {data() {return {tree_demo1: [],tree_demo2: [],default_data: [],defaultProps: {label: 'label',children: 'children'}}},created() {this.getList()},methods: {getList() {let demo = [{"children": [{"children": [{"id": "001","label": "指标一","parent_id": 100,},{"id": "002","label": "指标二","parent_id": 100,},{"id": "003","label": "指标三","parent_id": 100,},{"id": "004","label": "指标四","parent_id": 100,},{"id": "005","label": "指标五","parent_id": 100,},{"id": "006","label": "指标六","parent_id": 100,},{"id": "007","label": "指标七","parent_id": 100,},{"id": "008","label": "指标八","parent_id": 100,},{"id": "009","label": "指标九","parent_id": 100,},{"id": "010","label": "指标十","parent_id": 100,},{"id": "011","label": "指标十一","parent_id": 100,},{"id": "012","label": "指标十二","parent_id": 100,},{"id": "013","label": "指标十三","parent_id": 100,},{"id": "014","label": "指标十四","parent_id": 100,},{"id": "015","label": "指标十五","parent_id": 100,},{"id": "016","label": "指标十六","parent_id": 100,},{"id": "017","label": "指标十七","parent_id": 100,},{"id": "018","label": "指标十八","parent_id": 100,},{"id": "019","label": "指标十九","parent_id": 100,},{"id": "020","label": "指标二十","parent_id": 100,},{"id": "021","label": "指标二十一","parent_id": 100,},{"id": "022","label": "指标二十二","parent_id": 100,},{"id": "023","label": "指标二十三","parent_id": 100,},{"id": "024","label": "指标二十四","parent_id": 100,},{"id": "025","label": "指标二十五","parent_id": 100,}],"id": "100","label": "指标分类1-1","parent_id": 1,},{"children": [{"id": "026","label": "指标二十六","parent_id": 101,},{"id": "027","label": "指标二十七","parent_id": 101,},{"id": "028","label": "指标二十八","parent_id": 101,},{"id": "029","label": "指标二十九","parent_id": 101,},{"id": "030","label": "指标三十","parent_id": 101,},{"id": "031","label": "指标三十一","parent_id": 101,},{"id": "032","label": "指标三十二","parent_id": 101,},{"id": "033","label": "指标三十三","parent_id": 101,},{"id": "034","label": "指标三十四","parent_id": 101,},{"id": "035","label": "指标三十五","parent_id": 101,},{"id": "036","label": "指标三十六","parent_id": 101,},{"id": "037","label": "指标三十七","parent_id": 101,},{"id": "038","label": "指标三十八","parent_id": 101,},{"id": "039","label": "指标三十九","parent_id": 101,},{"id": "040","label": "指标四十","parent_id": 101,}],"id": "101","label": "指标分类1-2","parent_id": 1,},],"id": "1","label": "指标分类一","parent_id": 0,"status": 1},{"children": [{"id": "005","label": "指标五"},{"id": "010","label": "指标十"},{"id": "011","label": "指标十一"},{"id": "016","label": "指标十六"},{"id": "020","label": "指标二十"},{"id": "030","label": "指标三十"},{"id": "034","label": "指标三十四"},{"id": "033","label": "指标三十三"},{"id": "031","label": "指标三十一"},{"id": "021","label": "指标二十一"},{"id": "050","label": "指标五十"},{"id": "060","label": "指标六十"},{"id": "066","label": "指标六十六"},{"id": "068","label": "指标六十八"},{"id": "070","label": "指标七十"},],"id": "2","label": "指标分类二"}]this.tree_demo1 = [demo[0]]//第一棵树数据this.tree_demo2 = [demo[1]]//第二棵树数据},// 第一棵树选中节点数据tree_check1(data, check) {this.component_check_data_method(data, check, 'tree2', 'tree_demo2')},// 第二棵树选中节点数据tree_check2(data, check) {this.component_check_data_method(data, check, 'tree1', 'tree_demo1')},//递归拿到选中所有的子节点数据findChildrenIds(data) {let all_ids = [data.id]if (data.children && data.children.length > 0) {for (let child of data.children) {all_ids = all_ids.concat(this.findChildrenIds(child));//判断是否含有children数据,如果有就递归继续拼接}}return all_ids},// 递归拿到对应所有的父节点数据findParentIds(id, data) {const parentIds = [];function findNode(node, parentId) {if (node.id === id) {parentIds.push(parentId);return true;}if (node.children) {for (const child of node.children) {if (findNode(child, node.id)) {parentIds.push(parentId);return true;}}}return false;}for (const node of data) {if (findNode(node, null)) {break;}}return parentIds.reverse(); // 反转数组,让根节点id在最前面},// 通用选中节点获取数据的方法component_check_data_method(data, check, other_tree_ref, other_tree_data) {let first_data = this.$refs[other_tree_ref].getCheckedKeys()//获取另外一棵树的节点数据let all_nodes = []for (const nodeId of this.findChildrenIds(data)) {const parentIds = this.findParentIds(nodeId, this[other_tree_data])all_nodes.push(...parentIds)//拿到当前子节点对应的所有父节点}const filteredArr = [...new Set(all_nodes.filter(item => item !== null))]//去重和过滤nulllet select_all_data = [...filteredArr, ...this.findChildrenIds(data)]//拼接所有父节点和所有选中的子节点first_data = first_data.filter(item => !select_all_data.includes(item));//如果包含当前子节点就过滤this.$refs[other_tree_ref].setCheckedKeys([...first_data, ...check.checkedKeys])}}
}
</script>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt 调试体统输出报警声

文章目录 前言一、方法1 使用 Qsound1.添加都文件 直接报错2.解决这个错误 添加 QT multimedia3. 加入代码又遇到新的错误小结 二、第二种方法1.引入库 总结 前言 遇到一个需求&#xff0c;使用Qt输出报警声&#xff0c;于是试一试能调用的方法。 一、方法1 使用 Qsound 1.…

LC322. 零钱兑换

代码随想录 class Solution {public int coinChange(int[] coins, int amount) {int max Integer.MAX_VALUE;int [] dp new int[amount1];for(int j 0 ; j < dp.length; j ){dp[j] max;}dp[0] 0;for(int i 0 ; i < coins.length; i ){for(int j coins[i] ; j <…

什么是金融RPA?金融RPA解决什么问题?金融RPA实施难点在哪里?

什么是金融RPA&#xff1f;金融RPA&#xff0c;即金融领域的机器人流程自动化&#xff0c;是一种利用软件机器人来代替人工完成重复性劳动任务的技术。它能够通过模仿最终用户在电脑上的手动操作方式&#xff0c;实现自动化处理大量重复、规则明确的业务流程&#xff0c;如账务…

44-js return返回值,全局作用域,局部作用域,隐式作用域,变量的生命周期,delete释放内存

1.return返回值:函数执行后剩下结果就是返回值。 function fn(a,b,c){//return返回值return(a+b+c);// console.log("aaa"); //return之后的值都不在执行了// alert("bbb"); //return之后的值不在执行了}console.log(fn(1,2,3)*10); 2.作用…

每日一练 | 华为认证真题练习Day40

Day40 华为认证中级考试真题 ​ 1、端口镜像可以对哪些流量进行镜像(多选) A.接口接受的报文 B.端口发送的报文 C.端口发送和接收的报文 D.端口丢弃的报文 2、下列关于不同类型的防火墙的说法&#xff0c;错误的是 A.包过滤防火墙对于通过防火墙的每个数据包&#xff0…

低静态功耗的音频功率放大器D7368GS,适用于便携式立体声收录机应用

D7368是专为便携式立体声收录机而设计的音频功率放大器集成电路。 主要特点&#xff1a; ● 低静态功耗&#xff1a; Icco6 6mA(Typ) (Vcc6V) ● 电压增益高&#xff1a;40dB ( 典型值)。 ● 工作电源电压范围宽&#xff1a;Vcc2~10V. . ● 外围使用元件少( 仅需三个电容)。 ●…

软件测试|如何在Linux中下载和安装软件包

简介 在Linux操作系统中&#xff0c;下载和安装软件包是一项基本任务。不同的Linux发行版可能有不同的包管理工具和方式&#xff0c;但总体流程是类似的。以下是在Linux中下载和安装软件包的详细步骤。 步骤1&#xff1a;选择适当的包管理工具 因为Linux有不同的发行版本&am…

活动回顾∣“全邻友好,艺术大咖交流会”——员村街开展社区微型养老博览会长者文艺汇演活动

为进一步营造邻里守望&#xff0c;共建美好社区的氛围&#xff0c;促进社区长者参与社区服务&#xff0c;展示社区长者健康、积极向上的精神风貌&#xff0c;2024年1月10日&#xff0c;员村街开展“全邻友好&#xff0c;艺术大咖交流会”——微型养老博览会活动&#xff0c;让长…

Docker安装Redis 配置文件映射以及密码设置

安装直接docker pull redis即可&#xff0c;默认redis最新版 设置两个配置文件路径 mkdir -p /root/docker/redis/data mkdir -p /root/docker/redis/conf touch redis.conf // 容器挂载用conf配置文件 bind 0.0.0.0 protected-mode yes port 6379 tcp-backlog 511 timeout…

轴组【CAN】

如果有126个轴&#xff0c;你程序里挨个添加轴很麻烦。 可以用轴组批量添加。【数组】 CAN驱动器 0x164 就是下个驱动器 p_CAN主站地址:ADR(IoConfig_Globals.CANopen_Manager_SoftMotion);p_CAN从站地址1:ADR(IoConfig_Globals.DMA882_CAN);p_CAN从站地址2:ADR(IoConfig_Gl…

很容易导致错误的两种空格:普通空格和不换行空格

不换行空格&#xff08;Non-Breaking Space&#xff0c;又称硬空格&#xff0c;ASCII 160&#xff09;和&#xff08;普通空格&#xff0c;ASCII 32&#xff09;都是用于表示空白的字符&#xff0c;但它们有一些关键的区别&#xff1a; 显示效果&#xff1a; ASCII 32&#xff…

Swin Transformer 学习笔记(附代码)

论文地址&#xff1a;https://arxiv.org/pdf/2103.14030.pdf 代码地址&#xff1a; GitHub - microsoft/Swin-Transformer: This is an official implementation for "Swin Transformer: Hierarchical Vision Transformer using Shifted Windows". 1.是什么&#x…

libignition-gazebo-diff-drive-system.so是什么

因该就是个动态链接库&#xff0c;库文件之类 而且就是gazebo6版本也就是ign 这个版本的动态链接库有个特点&#xff1a;全部都是以.so结尾&#xff0c;所以很可能ign的插件plugin都是带.so的 abcdegx.so elvikorflsd.so fvlwirjgiojf.so等

Android可换行的RadioGroup

Android可换行的RadioGroup,有时候需要换行显示的单选列表&#xff0c;当然可以有多种实现方式&#xff0c;比如recycleview或者listview实现&#xff0c;本文采用的是RadioGrouprediobutton方式实现。 一、首先自定义view public class WrapRadioGroup extends RadioGroup {pr…

京东JD商品详情API:实时数据获取的实现

本文详细介绍了如何使用京东JD商品详情API实现实时数据获取。文章首先概述了京东JD商品详情API的特性和优势&#xff0c;然后介绍了实时数据获取的原理、技术要求和步骤。最后&#xff0c;结合具体代码&#xff0c;详细阐述了如何实现实时数据获取&#xff0c;包括API调用、数据…

经典算法-模拟退火算法求解旅行商问题TSP

经典算法-模拟退火算法求解旅行商问题TSP 旅行商问题&#xff08;Traveling Salesman Problem, TSP&#xff09;是组合优化中的经典问题。简单地说&#xff0c;一个旅行商需要访问N个城市&#xff0c;并返回到出发城市&#xff0c;问题是找到最短的可能路线&#xff0c;使得每…

【第一次使用finalshell连接虚拟机内的centos】小白处理方式

第一次使用finalshell连接centos7的时候&#xff0c;因为都是新环境什么都没有配置&#xff0c;所以就需要安装finalshell和对新的centos7 进行一些配置。 安装finalshel&#xff0c;默认不安装d盘&#xff0c;就需要对安装路径做一下调整&#xff0c;其余都是下一步默认安装的…

【AIGC】2023年生成式AI发展综述

文章目录 一、文本生成 & 智能问答二、AI绘画三、音频生成四、视频生成五、三维生成 & 数字人5.1 通用三维生成5.2 数字人 展望&#xff1a;通用人工智能趋势 2023年是人工智能内容生成&#xff08;AIGC&#xff09;技术飞速发展的一年。从年初ChatGPT一炮打响&#xf…

qt hoverMoveEvent鼠标响应事件

场景&#xff1a;QWidget里面套了QGraphicsView&#xff0c;QGraphicsView当中设置了QGraphicsScene场景以及自定义的QGraphicsItem像元重绘图像。 本想要在QWidget当中&#xff0c;让鼠标移动到图像上时&#xff0c;得到指定坐标。而QMouseEvent事件需要点击了鼠标后才会响应。…

润滑油元宇宙:探索未来润滑科技的新视界

随着科技的飞速发展&#xff0c;人类对于润滑剂的需求也在不断提高。在这个背景下&#xff0c;润滑油元宇宙应运而生&#xff0c;为我们展示了一个充满无限可能的未来润滑科技世界。那么&#xff0c;什么是润滑油元宇宙&#xff1f;它将如何改变我们的生活&#xff1f;本文将为…