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

这篇文章主要为大家详细介绍了element ui 表格动态列显示空白bug 修复方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

在使用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 修复方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5606-0.html

注：关于element ui 表格动态列显示空白bug 修复方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js