关于elementUI表格固定列&合计行

最新推荐文章于 2025-10-22 11:42:00 发布

原创最新推荐文章于 2025-10-22 11:42:00 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue中遇到的问题专栏收录该内容

6 篇文章

订阅专栏

当使用ElementUI的表格组件并尝试同时固定列和显示合计行时，可能会遇到合计行部分列消失的问题。通过在数据加载后调用`doLayout()`方法，可以解决这一显示错位的状况。此方法是用于调整表格布局，确保内容正确显示。在HTML中为表格添加`ref=table`属性，并在适当位置使用`this.$refs.table.doLayout()`。这是一个关于前端开发中Vue.js和ElementUI使用技巧的记录。

当`elementUI`的表格需要固定列同时又要y有合计行时，会出现以下情况：

格式问题

合计行被固定的三列可以展示，但是其它的列就不知道去哪了？！

通过万能的度娘，终于找到了解决方法，不得不说，广大网友的智慧真不是盖的！

通过思否一个大佬的提示，原网址在这里

直接在接口返回数据之后加上以下代码

this.$nextTick(() => {
  this.$refs.table.doLayout()
})

由于用到了$refs，所以不要忘了在html的table部分加上ref !

<el-table
  ref="table"
  :data="tableData"
  show-summary
  :height="tableHeight"
  :summary-method="getSummaries"
  style="width: 100%;"
  >
</el-table>