一个table组件复用,它只有一个scroll来控制表格下(不包含表头)的高度,所以我们得使表格高度自适应。

<a-table
  :columns="columns"
  :data-source="dataList"
  :loading="!showTable"
  bordered
  size="small"
  :scroll="{ x: '100%', y: `calc(100vh - ${tableTop+280+'px'})` }"
  :pagination="false"
>

计算表头高度部分,因为每次切换都是上一个表格的高度,所以我们需要把前一次表格的高度记录下来

mounted () {
  const a = document.querySelector('.ant-table-header')
  this.tableList = []
  this.tableList.push(a.clientHeight)
  this.tableList.push(a.clientHeight)
  this.tableTop = this.tableList[0]
},
watch: {
 columns () {
   setTimeout(() => {
     const a = document.querySelector('.ant-table-header')
     this.tableList.push(a.clientHeight)
     this.tableList.splice(0, 1)
     this.tableTop = this.tableList[1]
   }, 10)
 }
},
Logo

前往低代码交流专区

更多推荐