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

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

不多说废话，直接上问题：

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

这时候就出现了问题：

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

解决办法：

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

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

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

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

element 2.12版本

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

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

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

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

显示正常效果，

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

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

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

赞 (0)

相关推荐

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • Element中的Cascader（级联列表）动态加载省\市\区数据的方法

    element中的cascader其实是有动态加载次级选项的方法. 方法的原理是利用址(引用)传递,动态修改:options. var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: "tom"} http://element-cn.eleme.io/#/zh-CN/component/cascader#dong-tai-jia-zai-ci-ji-xuan-xiang 其中找到究竟需要在那层添加数据就变成

  • 详解element-ui级联菜单（城市三级联动菜单）和回显问题

    代码最下面 各项的参数截图 代码如下 <el-form-item label="户籍所在地" prop="censusLand" style="padding-left:57px"> <el-cascader v-model="ruleForm.censusLand" style="width:180px;padding-left:7px;width:270px" placeholder=

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

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

    最近在项目中需要用到级联这么个控件,所以便去element上找了个,发现了个问题,在这里跟大家分享下,介于公司项目的隐私性,所以一些文字便给大家打上马赛克了,敬请谅解~ 不多说废话,直接上问题: ElemenUI的级联是通过子级字段递归进行显示的,但是假如后端老铁也用了递归写的数据,而递归到最后一个数据集便出现了问题,会出现光有字段,但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题: 最后一级会多出来一个级联,这种体验便造成了很不好的感觉. 解决办法: 将获取这些级联的数据作为参数

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • elementUI实现级联选择器

    elementUI实现级联选择器

    本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1.从后端调用接口,传递数据到前端 2.使用VUE代码显示级联选项 <el-cascader :disabled="isDisabled" :props="defaultParams" :options="options" v-model="selectedOptions" :show-all-levels="false&

  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z) 2.代码解析 <el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%&q

  • vue element-ui中table合计指定列求和实例

    注意点: 1. <el-table> 中 加:summary-method="getSummaries" 2. <el-table-column> 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[ind

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • vue+element-ui中form输入框无法输入问题的解决方法

    目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 总结 一.问题发现: 笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容. 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在.最终发现问题是input标签中v-model写的不恰当导致无法生效/忘记书写v-model.如果有相同问题的可以看看本文有可能能帮助解决您的问题,下列解决过程以供参考. 二.正确案例与错误原理: 查看官网对于表单Form一栏的使

  • vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

    1.点击按钮,实现微信扫一扫功能: <template> <a class="btn" @click="scan">扫一扫</a> </template> 2.使用config接口注入配置信息,wx.config调用方法如下: (其中appId,timestamp,nonceStr,signature必须从后台获取,传参当前网页的URL,不包含#及其后面部分,location.href.split('#')[0]获取)

随机推荐