您的位置：首页 > 产品设计 > UI/UE

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

2018-08-29 12:22 1286 查看

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

element UI的Cascader级联选择器编辑时

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

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

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

写了一个方法如下：

1 function getTreeDeepArr(key, treeData) {
2
3     let arr = []; // 在递归时操作的数组
4     let returnArr = []; // 存放结果的数组
5     let depth = 0; // 定义全局层级
6     // 定义递归函数
7     function childrenEach(childrenData, depthN) {
8
9         for (var j = 0; j < childrenData.length; j++) {
10
11             depth = depthN; // 将执行的层级赋值 到 全局层级
12
13             arr[depthN] = (childrenData[j].id);
14
15             if (childrenData[j].id == key) {
16
17                 // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
18                 returnArr = arr.slice(0, depthN+1); //将目前匹配的数组，截断并保存到结果数组，
19                 break
20
21             } else {
22
23                 if (childrenData[j].children) {
24
25                     depth ++;
26                     childrenEach(childrenData[j].children, depth);
27
28                 }
29             }
30
31         }
32         return returnArr;
33     }
34     return childrenEach(treeData, depth);
35 }



测试部分

完整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: 1,
children: [{
id: 3
},{
id: 4,
children: [{
id: 5,
children: [{
id: 6
},
{
id: 8
}]
}]
},{
id: 7
},{
id: 12,
children: [{
id: 13
}]
}]
},{
id: 2,
children: [{
id: 9,
children: [{
id: 10
}]
}]
},{
id: 11
}];

// 结构：
//
//   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 = 0; // 定义全局层级
// 定义递归函数
function childrenEach(childrenData, depthN) {

for (var j = 0; j < childrenData.length; j++) {

depth = depthN; // 将执行的层级赋值 到 全局层级

arr[depthN] = (childrenData[j].id);

if (childrenData[j].id == key) {

// returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
returnArr = arr.slice(0, depthN+1); //将目前匹配的数组，截断并保存到结果数组，
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(7, treeData));

</script>
</body>
</html>

View Code

希望对碰到此问题的朋友们有帮助。

转载者：非常感谢这位大神的分享！

这个问题我搞一天，没搞出来，正当我欲哭无泪是，发现了上面这篇文章。

百度了相关文章

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函数。

我的问题：我没想到通过记录递归次数来组装查询成功时的路径，这暴露了我算法几乎没学过。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

element UI的Cascader级联选择器编辑时

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