element ui 表格动态列显示空白bug 修复方法


Posted in Javascript onSeptember 04, 2018

在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数。

removeColumn: function removeColumn(states, column) {
 var _columns = states._columns;
 if (_columns) {
  _columns.splice(_columns.indexOf(column), 1);
 }

这个函数中_columns是一个数组,column是一个对象,当indexOf匹配不到的时候,返回-1,但是splice函数会执行删除操作,所以必须加入判断。

removeColumn: function removeColumn(states, column) {
 var _columns = states._columns;
 if (_columns.indexOf(column) != -1) {
  _columns.splice(_columns.indexOf(column), 1);
 }

动态列问题解决!

以上这篇element ui 表格动态列显示空白bug 修复方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 #Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 #Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 #Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 #Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 #Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 #Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php文件上传类的分享
2017/07/06 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
解决yum对python依赖版本问题
2019/07/05 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python解包用法详解
2021/02/17 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
求职自荐信范文格式
2013/11/29 职场文书
企业年会主持词
2014/03/27 职场文书
圣诞节开幕词
2015/01/29 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL