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

您可能有感兴趣的文章
element UI table表格将时间戳改为日期时间格式

关于element-ui的隐藏组件el-scrollbar的使用

element-ui上传一张图片后隐藏上传按钮功能

element-ui表格合并span-method的实现方法

elementUI table表格动态合并的示例代码