el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域

问题1：table的底部有合计，官方文档是在table里设置show-summary，但是给table加固定高度后合计就会消失

1. 给el-table加上ref属性

<el-table
  ref="tableData"
  id="tableBox"
  v-loading="loading"
  :data="tableData"
  height="720"
  show-summary
  :summary-method="getSummaries"
>

2. updated生命周期函数

<script>
watch: {
  sumData: {
    async handler () {
      if (this.sumData.length > 0) {
        await this.$nextTick()
        const _tds = document.querySelectorAll('#tableBox .el-table__footer-wrapper tr>td')
        _tds[0].colSpan = 3
        _tds[0].style.textAlign = 'center'
        _tds[21].colSpan = 2
        _tds[21].style.textAlign = 'center'
      }
    },
    immediate: true
  }
},
updated () {
  this.$nextTick(() => {
    this.$refs.tableData.doLayout() // 解决表格行错位
  })
},
methods: {
  getSummaries (param) {
    // 后端将计算后的数据组成一个数组返回
    return this.sumData
  }
}

</script>

3.给el-table添加样式

<style lang="scss">
  .el-table {
    overflow: visible !important;
  }
</style>

注意：若未添加 summary-method="getSummaries" 时使用 updated 生命周期函数会导致合计行样式混乱。

问题2：根据问题1的解决步骤后表格合计行底部会出现空白区域

由于我的表格比较繁琐，有多级表头、固定列、合计行，且合计行并不是计算总和之类的，操作也很多，目前并没有找到合计行底部空白区域解决办法，我将暂时 将第二步的操作给注释 后表格也没有出现问题。

可能并不是所有人会出现这个问题，先记录一下，以后有好的解决方式会更新上来，或者大家知道怎么解决可以在评论区教一下我。