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

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

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

 

• vue.js  
• element-ui

2

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

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

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

写了一个方法如下：

 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 }

测试部分

// 测试结果：
// 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

View Code

完整Demo

完整html Demo如下：


"en">

    "UTF-8"/>
    


    // 结构：
// 
//   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

    "number" id="input">
    "javascript:;" οnclick="getArr()">获取
    
"result">结果：

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

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

 

转载于:https://www.cnblogs.com/hao-1234-1234/p/9553562.html