vue el-tree主键id重复 添加自增id 以及原相同节点同步勾选 同步操作

树数据只提供了nodeId,且存在不同节点重复nodeId的问题,由于树组件的node-key需要唯一性,所有这个时候我们需要给数据添加自增id (延申问题:操作某个节点的时候,同步操作与他nodeId相同的节点),代码如下

<template><div><el-tree:data="treeList"show-checkboxref="tree":check-strictly="false"node-key="id":props="props"@check-change="treeCheckChange"></el-tree></div>
</template><script>
export default {data() {return {props: {label: "label",children: "children",},initData: [], // 初始化数据treeList: [], // 树数据idAndNodeId: [], // 非目录节点id与nodeId直接的关系nodeIdMap: {}, // 非目录节点id和nodeId的关系对象 具体作用往下看};},mounted() {var arr = [{nodeId: "1",nodeName: "目录1",parentId: "-1",nodeType: 1,children: [{nodeId: "001",nodeName: "子节点1",nodeType: 2,parentId: "1",},{nodeId: "002",nodeName: "子节点2",nodeType: 2,parentId: "1",},{nodeId: "003",nodeName: "子节点3",nodeType: 2,parentId: "1",},],},{nodeId: "2",nodeName: "目录2",parentId: "-1",nodeType: 1,children: [{nodeId: "001",nodeName: "子节点1",nodeType: 2,parentId: "2",},{nodeId: "002",nodeName: "子节点2",nodeType: 2,parentId: "2",},{nodeId: "004",nodeName: "子节点24",nodeType: 2,parentId: "2",},],},];this.id = 0;arr = this.circulationTreeData(arr);this.treeList = arr;this.idAndNodeId = [];this.getIdAndNodeId(arr, 1);// 生成一个nodeIdMap// 遍历数组,将每个对象的nodeId作为属性名,将对象存入属性值中// 例如:{ "001": [{...}, {...}], "002": [{...}, {...}] }// 这样查找相同nodeId的设备时直接通过属性名取就行了var mapKey = "nodeId";this.nodeIdMap = this.idAndNodeId.reduce((carry, item) => {if (item.nodeType == 2) {carry[item[mapKey]] = carry[item[mapKey]] || [];carry[item[mapKey]].push(item);}return carry;}, {});},methods: {// 递归处理数据 添加自增idcirculationTreeData(data) {let children = [];data.forEach((item, index) => {if (item.children && item.children.length > 0) {children.push({...item,label: item.nodeName,id: this.id++,parentId: item.parentId,children: this.circulationTreeData(item.children),});} else {children.push({...item,label: item.nodeName,id: this.id++,parentId: item.parentId,});}});return children;},//递归获取id和node_id的联系getIdAndNodeId(data, level) {data.forEach((item) => {if (item.children && item.children.length > 0) {this.getIdAndNodeId(item.children, level + 1);} else {this.idAndNodeId.push({...item,level: level,});}});},// 节点勾选treeCheckChange(data, ischeck) {if (data.nodeType == 1) return;// 方法1 遍历idAndNodeId查找相同nodeId的节点 速度慢不推荐// if (ischeck) {//   this.idAndNodeId.forEach((item) => {//     if (item.nodeId == data.nodeId) {//       this.$refs.tree.setChecked(item.id, true);//     }//   });// } else {//   this.idAndNodeId.forEach((item) => {//     if (item.nodeId == data.nodeId) {//       this.$refs.tree.setChecked(item.id, false);//     }//   });// }// 方法2 直接取对象对应属性 速度快 推荐!!!let arrs = this.nodeIdMap[data.nodeId] || [];console.log(arrs);arrs.forEach((item) => {if (item.id != data.id) this.$refs.tree.setChecked(item.id, ischeck);});},},
};
</script>

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

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

相关文章

【微机原理】v和∧区别

&#x1f31f; 嗨&#xff0c;我是命运之光&#xff01; &#x1f30d; 2024&#xff0c;每日百字&#xff0c;记录时光&#xff0c;感谢有你一路同行。 &#x1f680; 携手启航&#xff0c;探索未知&#xff0c;激发潜能&#xff0c;每一步都意义非凡。 在汇编语言和逻辑表达…

UE 【材质编辑】自定义材质节点

使用UE的材质编辑器&#xff0c;蓝图提供了大量的节点函数&#xff1a; 实际上&#xff0c;这是一段封装好的包含一串HLSL代码的容器。打开“Source/Runtime/Engine/Classes/Material”&#xff0c;可以看到很多不同节点的头文件&#xff1a; 照葫芦画瓢 以UMaterialExpressi…

★ 算法OJ题 ★ 力扣 LCR179 - 和为 s 的两个数字

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;小诗歌剧将和大家一起做一道双指针算法题--和为 s 的两个数字~ 目录 一 题目 二 算法解析 三 编写算法 一 题目 LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 二 算法解析 …

MacOS使用FileZilla通过ssh密钥文件连接远程服务器(已解决)

需求描述 mac电脑,使用filezilla通过FTP连接远程服务器,使用ssh密钥文件代替密码。 版本信息 MacOS:Sonoma 14.5 M3芯片 FileZilla:3.66.5 在这里插入图片描述 连接 1. 创建站点 打开filezilla工具,右上角选择“文件 -> 站点管理器”,打开站点管理器弹窗。 2.…

2024“钉耙编程”中国大学生算法设计超级联赛(9)

传送门 1005 怪物猎人 如果全用 x 和 全用 y 攻击的轮次不同那么奇偶轮次都可以击败怪物&#xff1b;否则只有奇数轮次或者偶数轮次能够击败怪物。 #include <bits/stdc.h> using namespace std;#define int long longinline int read() {int x 0, f 1; char c get…

AI搜索:重塑信息获取的新纪元

在信息爆炸的时代&#xff0c;如何快速、准确地获取所需信息成为了每个人面临的挑战。传统的搜索引擎虽然在一定程度上解决了这一问题&#xff0c;但广告干扰、结果冗余、内容质量参差不齐等问题仍让用户体验大打折扣。随着AI技术的不断发展&#xff0c;AI搜索产品以其独特的优…

将工程内的组件 集成并发布到私有仓库以及后续联动运行(热启动)

将工程内的组件 发布到私有仓库 背景与简介 1、项目的数据 私有仓库地址&#xff1a; 【】 私有仓库账号/密码&#xff1a; 【】 组件包名称&#xff1a; 【ciec/ciec-component-pc】 组件包项目git地址&#xff1a;【 】 node版本&#xff1a;【】 2、文献链接 a)t b) 3、注意…

docker安装配置、docker命令

一、CentOS7安装docker 1、安装 Docker CE 支持 64 位版本 CentOS 7&#xff0c;并且要求内核版本不低于 3.10&#xff0c; CentOS 7 满足最低内核的要求&#xff0c;所以我们在CentOS 7安装Docker。 卸载旧docker 如果之前安装过旧版本的Docker&#xff0c;可以使用下面命令…

DFS、BFS、Union-Find:找出图中省份数量的最佳方法

题目理解 问题描述&#xff1a; 有 n 个城市&#xff0c;其中一些城市之间直接相连&#xff0c;另一些则不相连。如果城市 a 和城市 b 直接相连&#xff0c;且城市 b 和城市 c 直接相连&#xff0c;那么城市 a 和城市 c 间接相连。省份被定义为一组直接或间接相连的城市&…

美团2024秋招编程题:小美的red子序列数量之和

题目为&#xff1a; 小美有一个字符串&#xff0c;小美想知道这个字符串的所有连续子串中&#xff0c;red 子序列的数量之和。 子串是指从原字符串中&#xff0c;连续的选择一段字符组成的新字符串。 定义 red 子序列为从原字符串中从左到右依次取出r、e和d组成的新字符串。 …

1999-2023年上市公司年报文本数据(PDF+TXT)

1999-2023年上市公司年报文本数据&#xff08;PDFTXT&#xff09; 1、时间&#xff1a;1999-2023年 2、来源&#xff1a;上市公司年度报告 3、范围&#xff1a;A股上市公司&#xff0c;5600企业&#xff0c;6.3W份 4、格式&#xff1a;PDFTXT 5、下载链接&#xff1a; 199…

C#实现快速傅里叶变换(FFT)

1、FFT类 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServices.ComTypes; using System.Text; using System.Threading.Tasks;namespace DFT_FFTApp.Utils {public class FFT{/// <summary>/// FFT/// </summ…

Java12 Excel和Json文件解析

Excel文件解析&#xff1a; Excel文件解析(EasyExcel框架解析) Excel文件解析(Apache POl框架解析) &#xff08;1&#xff09;Excel文件对象创建&#xff1a;POI 《1》创建工作簿对象: XSSFWorkbook workbooknew XSSFWorkbook&#xff08;&#xff09;&#xff1b; 《2》创…

SQL语句复习

一、CTE和WITH CTE是一种命名的临时结果集,CTE是通过WITH子句来定义的. WITH cte_name (column1, column2, ...) AS (-- CTE查询定义SELECT ... ) -- 主查询 SELECT ... FROM cte_name WHERE ... column1, column2, ... 是可选的列名列表&#xff0c;通常用于给CTE的列命名。…

c++11新特性-lambda表达式

1. 概念 lambda表达式实际上是一个匿名类的成员函数&#xff0c;该类由编译器为lambda创建&#xff0c;该函数被隐式地定义为内联。因此&#xff0c;调用lambda表达式相当于直接调用它的operator()函数&#xff0c;这个函数可以被编译器内联优化&#xff08;建议&#xff09;。…

Ubuntu服务器时间和本地时间不一致怎么解决——Linux的Local Time和RTC time

最近一直在搞大模型的相关工作&#xff0c;所以一直在用Linux服务器&#xff0c;前面的文章里也提到了&#xff0c;我用的是一台Dell PowerEdge R730xd。 但在使用中发现&#xff0c;IDRAC中的日志时间和本地时间存在时差&#xff0c;大概相关8小时。 对于技术人员&#xff0c…

数据结构:树形结构(树、堆)详解

数据结构&#xff1a;树形结构&#xff08;树、堆&#xff09;详解 一、树&#xff08;一&#xff09;树的性质&#xff08;二&#xff09;树的种类二叉树多叉树满N叉树完全N叉树 &#xff08;三&#xff09;二叉树的实现1、二叉树结构定义2、二叉树功能实现&#xff08;1&…

windows安全中心永久卸载工具分享

使用方法 博客&#xff1a;h0ck1r丶羽~从零到一 卸载工具下载链接&#xff1a; 夸克网盘分享 一路回车&#xff0c;选项Y即可 耐心等待几秒种&#xff0c;自动重启 此时打开windows安全中心&#xff0c;已经完全不能使用了&#xff0c;响应的杀毒功能也关了 往期推荐 【渗透测…

机器人末端阻抗控制Simulink仿真

机器人末端阻抗控制是一种重要的机器人控制策略&#xff0c;它主要用于调节机器人末端执行器与环境之间的动态关系&#xff0c;以保证机器人在适当的柔顺性下进行轨迹跟踪或与环境交互。在使用Simulink进行机器人末端阻抗控制仿真时&#xff0c;主要步骤可以归纳如下&#xff1…

QT做一个USB HID设备识别软件

1.下载 HidApi库&#xff1a;GitHub - yigityuce/HidApi: Human Interface Device Api (HidApi) with C 2.pro文件添加 DEFINES - UNICODE LIBS -lsetupapi 3.建立三个对象 HidApi hidApi;HidDevice hidDev;//HID设备HidDeviceList devList;//HID设备列表 4.对 HID 设备进…