Element Cascader 级联选择器去除空叶子节点
此处以后端获取部门级联List为例
以下为数据结构
{
data: {
children: [
0:{childre:[
0:{},
1:{}
]},
1:{},
2:{},
3:{},
4:{},
]
}
1 getDepartment() {
2 //获取部门树
3 QueryDepartmentTree().then((res) => {
4 if (res.code === 0) {
5 this.departArray = this.setData(res.data.children)
6 }
7 })
8 },
9 setData(data) {
10 //递归,删除子树为空项 要根据返回的数据进行循环判断
11 if (data instanceof Array) {
12 data.forEach(item => {
13 if (item.children) {
14 if (item.children.length == 0) {
15 delete item.children
16
17 } else {
18 this.setData(item.children)
19 }
20 }
21 })
22 }
23 return data
24 },
Element Cascader 级联选择器去除空叶子节点的更多相关文章
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- element 的 Cascader 级联选择器设定默认值
Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...
- ElementUI 之 Cascader 级联选择器指定 value label
ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...
- ElementUI组件Cascader级联选择器数据后台处理
Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...
- element-ui Cascader 级联选择器示例
<html> <head>test</head> <style> @import url("http://unpkg.com/element- ...
- Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
- Element-ui Cascader 级联选择器 同时返回 value 和 label
给 cascader 组件赋值一个别名 ref="cascaderAddr" <el-form-item label="部门" prop="or ...
- Cascader 级联选择器无法赋值
问题: html: <el-cascader v-model="addform.qxvalue" :options="options" :props=&q ...
- Cascader 级联选择器hover选择效果
官网例子 <div class="block"> <span class="demonstration">hover 触发子菜单< ...
随机推荐
- 关于如何编写好金融科技客户端SDK的思考
引言 回想起来,我在目前的团队(金融科技领域)待了有很长一段时间了,一直在做SDK研发,平时工作中经历过大刀阔斧一蹴而就的喜悦,也经历过被一个问题按在地上摩擦,无奈"废寝忘食"的不 ...
- Spring Cloud 学习笔记(周阳)
参考博客:https://blog.csdn.net/u011863024/article/details/114298270 内容:netflix,alibaba
- 20个值得收藏的实用JavaScript技巧
1.确定对象的数据类型 function myType(type) { return Object.prototype.toString.call(type).slice(8, -1); 使用Obje ...
- Redis 性能优化
一.Linux 操作系统 [1]ulimit 与 TCP backlog:1).修改 ulimit:通过 ulimit 修改 open files 参数,redis 建议把 open files 至少 ...
- Linux 多服务器时间同步设置
找一个机器,作为时间服务器,所有的机器与这台集群时间进行定时的同步,比如,每隔十分钟,同步一次时间. 一.配置时间服务器具体步骤
- HaProxy 安装搭建配置
HaProxy简介 HAProxy是一个免费的负载均衡软件,可以运行于大部分主流的Linux操作系统上. HAProxy提供了L4(TCP)和L7(HTTP)两种负载均衡能力,具备丰富的功能.HAPr ...
- pandas之样本操作
随机抽样,是统计学中常用的一种方法,它可以帮助我们从大量的数据中快速地构建出一组数据分析模型.在 Pandas 中,如果想要对数据集进行随机抽样,需要使用 sample() 函数.sample() 函 ...
- [AIGC]GPT模型概述
2 Open AI: ChatGPT 2.0 ChatGPT 官网 https://openai.com/ https://platform.openai.com/ 原 : https://beta. ...
- [ElasticSearch]常用URL路径
https://127.0.0.1:9200/ http://127.0.0.1:9200/_all?pretty https://127.0.0.1:9200/_cluster/health?pre ...
- 【AIGC未来的发展方向】面向人工智能的第一步,一文告诉你人工智能是什么以及未来的方向分析
人工智能的概念 当人们提到"人工智能(AI)"时,很多人会想到机器人和未来世界的科幻场景,但AI的应用远远不止于此.现在,AI已经广泛应用于各种行业和生活领域,为我们带来了无限可能 ...