Vue+ElementUI 中级联选择器Bug问题的解决


Posted in Javascript onJuly 31, 2020

最近在项目中需要用到级联这么个控件,所以便去element上找了个,发现了个问题,在这里跟大家分享下,介于公司项目的隐私性,所以一些文字便给大家打上马赛克了,敬请谅解~

不多说废话,直接上问题:

Vue+ElementUI 中级联选择器Bug问题的解决

ElemenUI的级联是通过子级字段递归进行显示的,但是假如后端老铁也用了递归写的数据,而递归到最后一个数据集便出现了问题,会出现光有字段,但是却没有数据这么个情况在这里插入图片描述

Vue+ElementUI 中级联选择器Bug问题的解决

这时候就出现了问题:

Vue+ElementUI 中级联选择器Bug问题的解决

最后一级会多出来一个级联,这种体验便造成了很不好的感觉。

解决办法:

Vue+ElementUI 中级联选择器Bug问题的解决

将获取这些级联的数据作为参数传到这个递归函数当中,进行从组,假如递归到[ ] 转换为undefined(‘不识别'),这样就解决了这个多一个空级联的问题

补充知识:**vue,element.ui组件很容易忽略的坑--------级联选择器中的小bug**

前一段时间在使用vue2x版本进行电商后台的重构时发现的此版本的小bug,虽然不算什么大事,但对用户体验和页面美观还是有一定的影响的,在此分享给各位朋友;

在element组件的级联选择器中的Hover触发级联选择器的使用中出现问题,

Vue+ElementUI 中级联选择器Bug问题的解决

element 2.12版本

element 2.12版本中的选择器,在一定的数据量下,显示正常如图所示

Vue+ElementUI 中级联选择器Bug问题的解决

我所说的小bug为另一种情况下,即数据超过一定量的时候,级联选择器的显示范围为当前可视页面的全部,而且超过当前可视页面,如下图:

Vue+ElementUI 中级联选择器Bug问题的解决

想电商平台的分类,其数据量是巨大的,但也是很常见的网页写作,这时的效果已经与element给出的效果图相差甚大了,虽然为后台人员使用,但是也造成了页面不美观和一定程度的使用不便,本人查阅了之前的几个版本都无此问题,解决方式为:见下图

Vue+ElementUI 中级联选择器Bug问题的解决

在globel全局样式文件中加入此代码即可解决此问题,设置固定的高度,效果如下:

Vue+ElementUI 中级联选择器Bug问题的解决

显示正常效果,

虽然不是什么大问题,也要在开发时注意下,毕竟前端工程师是一个需要严谨、细心的工作,连一像素的差别都不放过的我们,这个小问题怎么能难倒我们呢?

相信官方在下一个版本中一定会完善这个问题的。

以上这篇Vue+ElementUI 中级联选择器Bug问题的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
jQuery的框架介绍
May 11 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
JS数组的常用10种方法详解
May 08 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
Vue之封装公用变量以及实现方式
Jul 31 #Javascript
three.js 将图片马赛克化的示例代码
Jul 31 #Javascript
three.js 如何制作魔方
Jul 31 #Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
jquery select下拉框操作的一些说明
2010/04/02 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
如何强制垃圾回收
2015/10/06 面试题
计算机专业自荐信
2013/10/14 职场文书
实习生个人找工作的自我评价
2013/10/30 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
便利店的创业计划书
2014/01/15 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
早会开场白台词大全
2015/06/01 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server