element UI Cascader 级联选择器 编辑 修改 数组 路径 问题（转载）
来源：https://segmentfault.com/a/1190000014827485
element UI的Cascader级联选择器组件在编辑时，
它需要一个数组值，而一般我们api给的数据是一个值。
两个解决方法：
- 说服后台，让后台给arr。
- 自己动手丰衣足食，根据给定的值获取级联关系数组。
刚好这两天解决了这个问题。
写了一个方法如下：
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函数。
我失败的原因：我没想到通过记录递归次数来组装查询成功时的路径。
element UI Cascader 级联选择器 编辑 修改 数组 路径 问题（转载）的更多相关文章
- 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中
Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...
- element 的 Cascader 级联选择器设定默认值
Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...
- 基于element ui的级联选择器组件实现的分类后台接口
今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持. 这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...
- Element UI：级联选择器Cascader_动态加载_多级请求不同接口（已知第一级调取第二级）
ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...
- element Ui的级联选择器 任意一级选中下拉框自动关闭
封装成一个子组件 <template> <el-cascader v-model="value" clearable placeholder="请选择& ...
- vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- ElementUI 之 Cascader 级联选择器指定 value label
ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...
- Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
- ElementUI组件Cascader级联选择器数据后台处理
Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...
随机推荐
- BiggerInteger类
java.math.BigInteger(需要导包)1.BigInteger构造方法*public BigInteger(String val)将 BigInteger 的十进制字符串表示形式转换为 ...
- [转] The QCOW2 Image Format
The QCOW2 Image Format https://people.gnome.org/~markmc/qcow-image-format.html The QCOW image format ...
- war和war exploded区别
war和war exploded区别 在使用IDEA开发项目的时候,部署Tomcat的时候通常会出现下边的情况: 是选择war还是war exploded 这里首先看一下他们两个的区别: war模式: ...
- 「总结」 MLEAutoMaton的各种板子总结
太菜了,所以咕了,欢迎评论留言... 网络流(不全) 自适应Simpson
- map put值 使用匿名函数
List<Map<String, Object>> list = setRoleMenuRlMapper.selectMapByParams(params); // Map m ...
- Windows 系统中的 CMD 黑窗口简单介绍
简介 DOS是磁盘操作系统的缩写,是个人计算机上的一类操作系统DOS命令,是DOS操作系统的命令,是一种面向磁盘的操作命令,主要包括目录操作类命令.磁盘操作类命令.文件操作类命令和其它命令.DOS系统 ...
- java并发机制锁的类型和实现
synchronized 和 volatile,是最基础的两个锁! volatile是轻量级锁,它在多核处理器开发中保证了共享变量的可见性.即当一个线程修改一个共享变量时,其他线程能够读到这个修改的值 ...
- springcloud开篇
微服务作为现在的常用架构,已经到了不学不行的地步.君不见spring官网https://spring.io/已经将springboot,springcloud,spring cloud data fl ...
- shell脚本中if的“-e，-d，-f”
文件表达式-e filename 如果 filename存在,则为真-d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真-L ...
- 关于git 指令
命令行操作(由于是Linux命令行下的普通用户,都是在$级别下操作): 一. 本机配置 添加用户 git config –global user.name “XX” git config –gloab ...