element UI的Cascader级联选择器组件在编辑时，
它需要一个数组值，而一般我们api给的数据是一个值。
两个解决方法：
- 说服后台，让后台给arr。
- 自己动手丰衣足食，根据给定的值获取级联关系数组。
刚好这两天解决了这个问题。
写了一个方法如下：
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);
}
// 结果：
// 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完整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>希望对碰到此问题的朋友们有帮助。
