antd vue表格自适应高度问题

一个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)
 }
},
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值