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 ...
随机推荐
- 万里长征第一步：Python进程池的一点点小坑
# -*- coding: utf- -*- """ Created on Thu Mar :: @author: lilide """ # ...
- Python之旅Day15 Bootstrap与Django初识
Bootstrap初识 Bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.(官网http://www.boo ...
- Android Studio 常见问题及解决方法
一.Error:All flavors must now belong to a named flavor dimension 问题描述: Error:All flavors must now bel ...
- 实用：Git 中的一些常见错误
无论是数据科学家.算法工程师还是普通开发人员,在每个团队协作开发任务中,Git 都是必不可少的版本控制工具,因此掌握它的基本操作十分有必要.但即便是教程满天飞的今天,开发人员在使用 Git 时也还是会 ...
- [Postman]证书(13)
Postman的本机应用程序提供了一种基于每个域查看和设置SSL证书的方法. 要管理客户端证书,请单击标题工具栏右侧的扳手图标,选择“设置”,然后选择“ 证书”选项卡. 添加客户端证书 要添加新客户端 ...
- 转：Python: 什么是*args和**kwargs
今天看源码的时候发现一个是*args和**kwargs,一看就能知道args是神马,就是所有参数的数组,kwargs就不知道了,google一下,一个人的blog写的比较简单明了,秒懂了~~kwarg ...
- Web发展简史（精编故事版，贤来给你讲故事）
Web发展简史 一. Web发展简史之隔壁老王的故事 有一个人叫隔壁老王,老王有一个爱好就是爱看电影.有一天,这个隔壁老王想看一部电影,可是电脑里面存储的电影太多了,他费了老大劲才从里面找到,觉得很不 ...
- springbean的生命周期
1.Spring对Bean进行实例化(相当于程序中的new Xx())2.Spring将值和Bean的引用注入进Bean对应的属性中3.如果Bean实现了BeanNameAware接口,Spring将 ...
- ubuntu 16.04下安装ADB
1. 安装adb工具. 从谷歌的网站下载LINUX adb调试工具(FQ),当然可以随便百度一个一大堆. http://developer.android.com/tools/device.html ...
- stc15f104w模拟串口使用
stc15f104w单片机体积小,全8个引脚完全够一般的控制使用,最小系统也就是个电路滤波----加上一个47uf电容和一个103电容即可,但因为其是一个5V单片机,供电需要使用5V左右电源. 该款单 ...