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

embedded/2025/1/15 22:40:45/

树数据只提供了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.ppmy.cn/embedded/103983.html

相关文章

Springboot小区疫情登记系统—计算机毕业设计源码24621

摘 要 如今计算机行业的发展极为快速&#xff0c;搭载于计算机软件运行的数据库管理系统在各行各业得到了广泛的运用&#xff0c;其在数据管理方面具有的准确性和高效性为大中小企业的日常运营提供了巨大的帮助。自从2020年新冠疫情爆发以来&#xff0c;防疫成了社会关注的重中…

环境变量--永久 & 暂时

Linux 环境变量配置信息 查看环境变量 export 查看系统所有环境变量echo $PATH 查看 PATH 环境变量值 环境变量的命名规则为&#xff1a;变量名变量值 多个变量值之间使用 : 分隔 添加环境变量 环境变量分类 按照作用域分类 环境变量可以简单的分成用户自定义的环境变量…

【赵渝强老师】MongoDB的In-Memory存储引擎

MongoDB的In-Memory存储引擎将会把数据存储在内存中。除了少量的元数据和诊断日志以外&#xff0c;In-Memory存储引擎不会维护任何存储在硬盘上的数据&#xff0c;从而避免硬盘的读写操作&#xff0c;以减少数据查询的延迟&#xff0c;从而提高性能。 提示&#xff1a;虽然In-M…

通过查找真实IP bypass WAF

当已知某站存在漏洞时&#xff0c;Web 应用程序防火墙&#xff08;简称WAF&#xff09;是最大的阻碍。通常&#xff0c;这些网站都很老旧&#xff0c;维护得不是很好&#xff0c;因此在大多数情况下&#xff0c;将 WAF 放在它们之上会更容易。有一种方法可以绕过这一层保护&…

【备战金九】Spring Cloud Consul 面试题

在面试中&#xff0c;你有没有被问到 Spring Cloud Consul 相关的问题呢&#xff1f;针对这个问题&#xff0c;我需要了解 Consul 的基本概念、核心功能、与 Eureka 和 Zookeeper 的区别、服务注册和发现机制、以及健康检查配置等&#xff0c;这些是展示你的技术功底和对微服务…

算法设计与分析:实验六 图论——最大流应用问题

实验内容&#xff1a; 1996 年 9 月 10 日&#xff0c;《旧金山纪事报》的体育版上登载了《巨人队正式告别 NL 西区比赛》一文&#xff0c;宣布了旧金山巨人队输掉比赛的消息。当时&#xff0c;圣地亚哥教士队凭借 80 场胜利暂列西区比赛第一&#xff0c;旧金山巨人队只赢得了…

iOS面试:在block内如何修改block外部变量?

在 iOS 开发中&#xff0c;block 是一种在封装了执行代码的结构&#xff0c;用于处理异步操作、回调等场景。当我们在 block 内部想要修改外部变量时&#xff0c;必须遵循一些规则。以下是一些相关的注意事项和示例。 1. 使用 __block 修饰符 要在 block 内部修改外部变量&am…

使用 Python 实现自动化办公

使用 Python 实现自动化办公 在现代办公环境中&#xff0c;自动化是提高工作效率和减少人为错误的重要手段之一。Python 是一种功能强大且灵活的编程语言&#xff0c;可以轻松地实现自动化办公任务。 下面是一个简单的示例&#xff0c;展示如何使用 Python 实现自动化办公&am…