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 ...
随机推荐
- #227 Generate Random Whole Numbers within a Range
我们之前生成的随机数是在0到某个数之间,现在我们要生成的随机数是在两个指定的数之间. 我们需要定义一个最小值和一个最大值. 下面是我们将要使用的方法,仔细看看并尝试理解这行代码到底在干嘛: Math. ...
- #224 Profile Lookup (for in & if )
我们有一个对象数组,里面存储着通讯录. 函数 lookUp 有两个预定义参数:firstName值和prop属性 . 函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人.如果存 ...
- SQL 经典应用
SQL Server日常维护常用的一些脚本整理. 1.sql server开启clr权限: exec sp_configure 'clr enabled', 1 GO RECONFIGURE GO A ...
- Python学习笔记-函数基础
函数基础 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 为什么使用函数:减少重复代码.使程序变的可扩展使程序变得易维护 1.定义一个函数 #定 ...
- Python学习笔记-基础1
一 初识Python python是一种面向对象.解释型的计算机程序语言.Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特 ...
- ProgressBar 进度条开源项目总结
在Android开发中,我们不免会遇到进度条展示的需求,以下是本人之前star的开源项目,供大家参考: 一.ArcProgressBar 开源项目地址:https://github.com/zenoT ...
- python 利用matplotlib中imshow()函数绘图
matplotlib 是python最著名的2D绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.通过简单的绘图语 ...
- vue 移动端屏幕适配 使用rem
要想移动端适配 并使用 rem 您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. po ...
- 【shiro】(3)---了解Shiro
了解Shiro 一Apache Shiro作用 Apache Shiro是一个功能强大且易于使用的Java安全框架,可执行身份验证,授权,加密和会话管理,令行应用程序. Shiro提供了应用程序安全A ...
- mysql 开发基础系列17 存储过程和函数(上)
一. 概述 存储过程和函数是事先经过编译并存储在数据库中的一段sql语句集合,可以简化应用开发人员的很多工作,减少数据在数据库与应用服务器之间的传输,提高数据处理效率是有好处的.存储过程和函数的区别在 ...