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

本文主要是介绍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>

这篇关于vue el-tree主键id重复 添加自增id 以及原相同节点同步勾选 同步操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---