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 ...
随机推荐
- cordova 开发
这个挺好用的, 确实 把一个 Android 和 IOS 的App 给生成了. html为前端, js调用 Java 或 object -C的代码. 加快了开发的进度 在不使用插件的基础上 ,基本实现 ...
- JSHFJK师德师风幅度十分时尚大方JSHFJK
sdjfhjksd{104411661166112205880477047710881111099909771088104411111155116605880533055505330500051104 ...
- ubuntu 16.04 安装 ssh
只要一条命令: sudo apt-get install openssh-server
- QEMU KVM libvirt手册(4) – images
RAW raw是默认的格式,格式简单,容易转换为其他的格式.需要文件系统的支持才能支持sparse file 创建image # qemu-img create -f raw flat.img 10G ...
- Must Know Tips/Tricks in Deep Neural Networks
Must Know Tips/Tricks in Deep Neural Networks (by Xiu-Shen Wei) Deep Neural Networks, especially C ...
- Dubbo 源码分析 - 集群容错之 Router
1. 简介 上一篇文章分析了集群容错的第一部分 -- 服务目录 Directory.服务目录在刷新 Invoker 列表的过程中,会通过 Router 进行服务路由.上一篇文章关于服务路由相关逻辑没有 ...
- 动态调试|Maccms SQL 注入分析(附注入盲注脚本)
0x01 前言 已经有一周没发表文章了,一个朋友叫我研究maccms的代码审计,碰到这个注入的漏洞挺有趣的,就在此写一篇分析文. 0x02 环境 Web: phpstudySystem: Window ...
- Javascript高级编程学习笔记（33）—— 客户端检测（2）怪癖检测
怪癖检测 和能力检测类似,但其目标不同 能力检测的目的是判断浏览器支不支持某种能力 而怪癖检测的目的是判断浏览器是否存在某些缺陷 这种时候需要我们执行一段代码来判断浏览器是否有这样的缺陷 或者说是怪癖 ...
- Go语言map
map 是一种特殊的数据结构:一种元素对(pair)的无序集合,pair 的一个元素是 key,对应的另一个元素是 value,所以这个结构也称为关联数组或字典.这是一种快速寻找值的理想结构:给定 k ...
- 简单读！spring-mvc源码之穿越http请求
相信spring-mvc这种被玩坏了的架构理念,大家都烂熟于胸了,不过还是想来扒一扒他的细节. 一个http请求,怎么样被 spring 接收,又怎样做出响应呢? 一般地,我们会配置一个 web.xm ...