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

最新推荐文章于 2025-03-12 14:24:08 发布

zjw0742

最新推荐文章于 2025-03-12 14:24:08 发布

阅读量8.6k

点赞数 1

分类专栏： javascript 文章标签： element 动态列空白显示表格

本文链接：https://blog.youkuaiyun.com/zjw0742/article/details/77746047

版权

javascript 专栏收录该内容

12 篇文章

订阅专栏

在Element UI框架的表格应用中，遇到动态生成列时出现显示空白的bug。问题出现在列刷新过程中，尤其是减少列时。通过调试源码发现，在element-ui.lib.elementui.common.js文件的特定函数中，由于缺少条件判断，导致删除操作错误。解决方案是确保在执行splice函数前，检查_columns数组中是否包含要删除的column对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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);
  }

动态列问题解决