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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python-嵌套列表list的全面解析
2016/06/08 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python3 读取Excel表格中的数据
2018/10/16 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python3.5安装python3-tk详解
2019/04/26 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python判断是空的实例分享
2020/07/06 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
Vrbo英国:预订度假屋
2020/08/19 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
运动会入场词100字
2014/02/06 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
检讨书范文1000字
2015/01/28 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
中学政教处工作总结
2015/08/13 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers