element-UI使用v-if隐藏列引起table高度变小的问题

brucelee20314

于 2024-01-20 18:39:05 发布

阅读量834

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端

文章介绍了在Vue项目中使用ElementUI表格时，针对v-if引起的高度问题和抖动现象的两种解决方案：一是使用随机key，但可能导致抖动；二是通过ref和生命周期函数`updated`调用`doLayout()`方法，这种方法既解决了高度问题又无抖动，提升了用户体验。

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

网上找了很多解决方案，本人筛选出比较靠谱的两种解决方式

方案一

el-table-column标签上加:key="Math.random()",可以解决但是会产生抖动现象，客户体验不好。

方案二

el-table标签加上ref="showData_table"并在生命周期函数update中进行调用doLayout()方法

<el-table v-loading="loading" :data="historyList" @selection-change="handleSelectionChange" :height="510" ref="showData_table">

updated() {
    this.$refs['showData_table'].doLayout()
  }

总结：方法二完美解决v-if引起的高度问题，并且无抖动