element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

来源:https://segmentfault.com/a/1190000014827485

2

element UI的Cascader级联选择器组件在编辑时,
它需要一个数组值,而一般我们api给的数据是一个值。
两个解决方法:

  1. 说服后台,让后台给arr。
  2. 自己动手丰衣足食,根据给定的值获取级联关系数组。

刚好这两天解决了这个问题。

写了一个方法如下:

 function getTreeDeepArr(key, treeData) {

     let arr = []; // 在递归时操作的数组
let returnArr = []; // 存放结果的数组
let depth = ; // 定义全局层级
// 定义递归函数
function childrenEach(childrenData, depthN) { for (var j = ; j < childrenData.length; j++) { depth = depthN; // 将执行的层级赋值 到 全局层级 arr[depthN] = (childrenData[j].id); if (childrenData[j].id == key) { // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
returnArr = arr.slice(, depthN+); //将目前匹配的数组,截断并保存到结果数组,
break } else { if (childrenData[j].children) { depth ++;
childrenEach(childrenData[j].children, depth); }
} }
return returnArr;
}
return childrenEach(treeData, depth);
}


测试部分
// 测试结果:
// console.log(getTreeDeepArr(1, treeData)); // [1]
// console.log(getTreeDeepArr(3, treeData)); // [1, 3]
// console.log(getTreeDeepArr(5, treeData)); // [1, 4, 5]
var treeData = [{
id: ,
children: [{
id:
},{
id: ,
children: [{
id: ,
children: [{
id:
},
{
id:
}]
}]
},{
id:
},{
id: ,
children: [{
id:
}]
}]
},{
id: ,
children: [{
id: ,
children: [{
id:
}]
}]
},{
id:
}]; // 结构:
//
// 1 --- 3
// --- 4 --- 5 --- 6
// --- 8
// --- 7
// 2 --- 9 --- 10
//

完整Demo
完整html Demo如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<pre>
// 结构:
//
// 1 --- 3
// --- 4 --- 5 --- 6
// --- 8
// --- 7
// --- 12 --- 13
// 2 --- 9 --- 10
// 11
// 获取节点以及节点的父级关系
// 0 1
// 1 3
// 1 4
// 2 5
// 3 6
// 3 8
// 1 7
// 1 12
// 2 13
// 0 2
// 1 9
// 2 10
// 0 11
</pre>
<input type="number" id="input">
<a href="javascript:;" onclick="getArr()">获取</a>
<div id="result">结果:</div>
<script>
// js 获取树形深度关系数组
// 树形数据如下例中的treeData,
// 希望有如下结果:
// console.log(getTreeDeepArr(1, treeData)); // [1]
// console.log(getTreeDeepArr(3, treeData)); // [1, 3]
// console.log(getTreeDeepArr(5, treeData)); // [1, 4, 5]
var treeData = [{
id: ,
children: [{
id:
},{
id: ,
children: [{
id: ,
children: [{
id:
},
{
id:
}]
}]
},{
id:
},{
id: ,
children: [{
id:
}]
}]
},{
id: ,
children: [{
id: ,
children: [{
id:
}]
}]
},{
id:
}]; // 结构:
//
// 1 --- 3
// --- 4 --- 5 --- 6
// --- 8
// --- 7
// 2 --- 9 --- 10
// 11
// 获取节点以及节点的父级关系
// 0 1
// 1 3
// 1 4
// 2 5
// 3 6
// 3 8
// 1 7
// 0 2
// 1 9
// 2 10
// 0 11
function getTreeDeepArr(key, treeData) { let arr = []; // 在递归时操作的数组
let returnArr = []; // 存放结果的数组
let depth = ; // 定义全局层级
// 定义递归函数
function childrenEach(childrenData, depthN) { for (var j = ; j < childrenData.length; j++) { depth = depthN; // 将执行的层级赋值 到 全局层级 arr[depthN] = (childrenData[j].id); if (childrenData[j].id == key) { // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
returnArr = arr.slice(, depthN+); //将目前匹配的数组,截断并保存到结果数组,
break } else { if (childrenData[j].children) { depth ++;
childrenEach(childrenData[j].children, depth); }
} }
return returnArr;
}
return childrenEach(treeData, depth);
} function getArr() {
var _input = document.getElementById('input').value; console.log(getTreeDeepArr(_input, treeData).join(','))
document.getElementById('result').innerHTML = '结果:' + getTreeDeepArr(_input, treeData).join(',');
}
console.log(getTreeDeepArr(, treeData)); </script>
</body>
</html>

相关文章

js中树结构根据条件查找节点返回节点路径   https://blog.csdn.net/chaos_hf/article/details/80150911

js中树结构根据条件查找节点返回节点路径的一些思路  https://www.cnblogs.com/lycnblogs/archive/2017/05/18/6874389.html

解决问题思路:

首先想到了递归,想到了树的查询算法,这两篇文章写的很明显了,但我尝试了多次都没成功。

最后一想,这么多人用这个组件,肯定有人遇到相同的问题,于是我改了下百度关键词:element UI的Cascader级联选择器 编辑 修改

算法关键步骤:

1.记录了递归的次数,依次获取保留id值;

2.在函数B里面还再次定义函数A和A的全局变量,并让函数B返回A函数。

我失败的原因:我没想到通过记录递归次数来组装查询成功时的路径。


上一篇:使用insert into select from批量插入数据


下一篇:sqlserver多表数据处理