vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题
1.出现问题bug: el-cascader控件 最后一级出现空白 暂无数据
2. 问题原因分析
经过调试分析出现空级联原因是：由于数据是从后台传递过来的，当后端的哥们使用递归算出菜单，然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组，这样就会造成，空级联 的bug存在。
3.解决办法: 使用递归的方式，将最底层中的 children设为undefined
html代码
<el-cascader:options="organizationData":props="leadProps"clearablev-model="powerForm.selectKeys"@change="handleChange"></el-cascader>js代码
利用js递归将最后一级空数组变成undefined
getTreeData(data) {for (let i = 0; i < data.length; i++) {if (data[i].children.length < 1) {// 最后一级没有数据将children变成undefineddata[i].children = undefined;} else {// children不为空时继续调用该方法this.getTreeData(data[i].children);}}return data;},对后台数据进行调用递归函数进行转换
// 获取指标牵头单位数据async getOrganizationalData() {try {const { data: res } = await getOrganizationData();this.organizationData = this.getTreeData(res.organizationList);} catch (error) {this.$message.error(error.message);}},vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题相关推荐
- element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条 下面展示一些 内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
- 解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
- 关于Vue框架Element UI中分页器，当前页的问题
页面跳转后,再返回本页面依然是之前跳转时的pageNum. ---当分页超过2页时,在大于等于第二页中进行跳转,跳转到其他页面后返回,依然是跳转时的页面. 这里面涉及到的参数传递自然是用router中 ...
- ElementUI中的 Cascader 级联选择器 卡顿问题
当数据多的时候可能出现卡顿的情况,在点击小叉号进行删除已经选择的数据的时候,也可能会出现卡顿的情况,在当重置清空数据的时候,使用一下方式或许会避免 页面卡顿, let obj = {}obj.stop ...
- Vue+element ui表单中省市区级联选择—v-distpicker/Cascader
v-distpicker组件或Cascader 级联选择器 1.页面 <el-form ref="form" :model="form" :rules=& ...
- vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
最新文章
- Android 接入Realm并使用
- Elasticsearch学习笔记-04修改数据
- matlab多个绘图,合并多个绘图 - MATLAB Simulink - MathWorks 中国
- poj 1961 Period
- 迷宫寻路系列常用算法逻辑探究
- vue项目中使用swiper
- SSH实战 · 唯唯乐购项目（中）
- 记AELF区块链网络的一次内存持续增长问题排查
- python writelines_Python文件writelines()方法
- python环境配置（二）——centos6+ 安装python3.6以及pip3
- Nginx+Tomcat+Memecached实现session共享配置
- 二、套接字类型与协议设置
- 5.1 凸二次规划问题
- 快速提高网站排名软件
- 贸易合规服务市场现状研究分析报告 -
- antd picker 使用 如何_antd-RangePicker
- 有用的一些链接Powerstore VxRail
- iOS 芝麻认证开发（跳转本地的支付宝进行认证开发）
- Oracle等数据库报盘步骤(使用脚本批量压缩)
- matlab 函数 平移,MATLAB图线先下平移