动态表头导致表格底部留白问题

CSDN话题挑战赛第2期
参赛话题：前端技术分享

「主题」

el-table高度自适应后出现底部留白问题

问题导致的原因

由于el-table的表头是动态加载的

解决办法

需要在动态表头加载完之后，重新加载下表格，则不会出现底部留白的问题

参考代码

push完data数据之后，执行代码
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.refs.table.doLayout()
})

整体代码参考
<el-table
border

      ref="table"
      size="small"
      :header-cell-style="tableHeaderColor"
      highlight-current-row empty-text="暂无数据"
      :height="tableHeight"
      :data="
        tableData.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
    >

data中定义：tableHeight: document.body.clientHeight,
初始化时动态获取高度：
this.$nextTick(() => {

    this.tableHeight=document.body.clientHeight-this.$refs.centerCharts.$el.offsetHeight
    -this.$refs.topSelect.$el.offsetHeight-46-40-16-16-32-2-2-1;
    console.log(this.tableHeight)
    this.$refs.table.doLayout()
  })

初始化时获取表头数据：
getColumns(startDate, endDate).then((res) => {
if (res.data) {
this.tableColumns = []

      res.data.list.forEach((item) => {
        let data = {
          label: item.MONTH,
          prop: item.MONTH
        }
        this.tableColumns.push(data)
        this.$nextTick(() => {
    this.$refs.table.doLayout()
  })
      })
    }
  })