el-table当列数据或列内容发生变化时引起的bug

最新推荐文章于 2024-09-25 15:57:19 发布

logga

最新推荐文章于 2024-09-25 15:57:19 发布

阅读量414

点赞数 5

CC 4.0 BY-SA版权

文章标签： bug 前端 vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/logga/article/details/137544368

文章讲述了开发者在项目中遇到的问题，即如何使用ElementUI的el-table根据上传的Excel表格动态添加或减少列。通过在router-view上添加key和调整表格组件的itemKey属性解决了表格在数据量变化时列显示问题。

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

最近在开发一个项目时遇到一个需要根据上传excel表格动态生成临时列的表格，使用的是element的el-table，测试发现，当第一次上传表格时，数据和列没有问题，但是当上传一个比当前列少的表格，则会出现最后一列显示不出来的问题：

经过代码改动已经完成了表格的动态刷新，其实是在router-view上加key来强制刷新

在表格组件中增加key事件，并且在js中增加itemKey声明，

<ps-table ref="submitTable" :key="itemKey" style="white-space: pre-wrap;" height="100%" :loading="sumbitTableLoading" :table-props="submitTableProps" is-query="info" :show-toolbar="false" :show-pagination="false" :data-columns="submitColumns" :data="submitTableData" :rownumbers="false"></ps-table>

以及在页面全部加载完后调用该方法：