antd table 自动调整高度实现滚动

<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
    <a slot="action" slot-scope="text">action</a>
</a-table>

核心：:scroll="{ x: 1500, y: 'calc(100vh - 460px)' }",这样可以根据屏幕的可视高度来计算表格的高度

自动计算表格内容的高度

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

/**
 * 获取第一个表格的可视化高度
 * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74) 
 * @param {*} id 当前页面中有多个table时需要制定table的id
 */
export function getTableScroll({ extraHeight, id }) {
  if (typeof extraHeight == "undefined") {
    //  默认底部分页64 + 边距10
    extraHeight = 74
  }
  let tHeader = null
  if (id) {
    tHeader = document.getElementById(id) ? document.getElementById(id).getElementsByClassName("ant-table-thead")[0] : null
  } else {
    tHeader = document.getElementsByClassName("ant-table-thead")[0]
  }
  //表格内容距离顶部的距离
  let tHeaderBottom = 0
  if (tHeader) {
    tHeaderBottom = tHeader.getBoundingClientRect().bottom
  }
  //窗体高度-表格内容顶部的高度-表格内容底部的高度
  // let height = document.body.clientHeight - tHeaderBottom - extraHeight
  let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`
  return height
}

使用

//html
<a-table :scroll="{y: tableheight}"></a-table>
//引用
import { getTableScroll } from "@/utils/index.js";
//mounted中
this.tableheight = getTableScroll({id:"tables"});