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 触发子菜单< ...
随机推荐
- 痞子衡嵌入式:Farewell, 我的写博故事2021
-- 题图:苏州盘门景区 2021年的最后一天,按惯例写个年终总结吧.感觉今年过得异常快,新冠疫情虽然得到一定程度控制,但大家似乎再难回到疫情前的生活状态.如果你尝试去回顾 2020 - 2021 这 ...
- c/c++指针从浅入深介绍——基于数据内存分配的理解(上)
c/c++指针从浅入深介绍--基于数据内存分配的理解(上) 本文是对自我学习的一个总结以及回顾,文章内容主要是针对代码中的数据在内存中的存储情况以及存储中数值的变化来对指针进行介绍,是对指针以及数据在 ...
- SpringBoot笔记--事件监听+启动流程+监控+项目部署
事件监听 ApplicationContextInitializer SpringApplicationRunListener ApplicationRunner CommandLineRunner ...
- Echarts中slider滑块调整样式
今天遇到了一个问题,记录一下. 效果图. 原型图 一个页面中,引入了echarts的柱状图来动态显示数据,由于柱状图太高,echarts没有自动生成的滚动条,所以就用slider滑块手写了一个,但是效 ...
- 全网最详细中英文ChatGPT接口文档(二)30分钟开始使用ChatGPT——快速入门
目录 Quickstart 快速启动 Introduction 导言 1 Start with an instruction 从说明开始 2 Add some examples 添加一些示例 3 Ad ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——20.汇编语言读硬盘实战
学习操作系统原理最好的方法是自己写一个简单的操作系统. 本讲我们设计一个简单的读硬盘实验.通过一定的方法使硬盘第二个扇区的前3个字节依次为1.2.3,最后3个字节依次为3.2.1,中间的506个字节全 ...
- 如何快速弄懂Java线程池
Java线程池是一种高效的多线程编程技术,它可以帮助程序员有效地控制多线程的并发执行.它可以提高应用程序的性能.降低内存消耗和减少延迟. 线程池的原理是,程序员可以将每个任务放入线程池中,然后由线程池 ...
- SpringBoot——配置嵌入式 Servlet容器
更多内容,前往 IT-BLOG 一.如何定制和修改Servlet容器的相关配置 前言:SpringBoot 在Web 环境下,默认使用的是 Tomact 作为嵌入式的 Servlet容器: [1]修 ...
- 有了HTTP,为啥还要用RPC
既然有 HTTP 请求,为什么还要用 RPC 调用? 一直以来都没有深究过RPC和HTTP的区别,不都是写一个服务然后在客户端调用么? HTTP和RPC最本质的区别,就是 RPC 主要是基于 TCP/ ...
- 痞子衡嵌入式:恩智浦经典LPC系列MCU内部Flash IAP驱动入门
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦经典LPC系列MCU内部Flash IAP驱动. LPC 系列 MCU 是恩智浦公司于 2003 年开始推出的非常具有代表性的产品 ...