使用Element UI当中的el-table时,使用show-summary导致合计行丢失

580 阅读1分钟

问题描述:

提示:element ui 在参数以及方法较多时会出现某些功能渲染失败。

在项目中需要使用到表格里的show-summary参数来进行合计显示,当使用了show-summary参数以后发现表格最后一行合计的错行并且丢失,详见下图

image.png

原因分析:

可能原因:组件和参数使用过多导致渲染出现异步而失效

解决方案:

在.vue文件中 table 当中添加 ref=“table”

<el-table
    :data="xxxxxx"
    border
    show-summary
    :summary-method="方法名"
    ref="table"//重点!!!
>
</el-table>

在 js 代码中添加以下代码:

export default {
  updated () {
    this.$nextTick(() => {
      this.$refs['table'].doLayout();
    })
  },
}

最终解决:

image.png