ant design 自适应高度表格_Ant Design vue table 自适应页面高度

表格(table)可能是在业务开发的时候，用到的最多的组件，Ant Design vue table 也有着一套十分强大的API，而其中有一项开发时，可能希望表格可以随着当前页面的分辨率，来动态调整表格的固定高度，

使整个页面更加美观性或者适用性。

一、说明：

首先，用到的是table自带的API【:scroll="{ x: 1300,y: 400 }"】

其中x指横轴滚动条设置，这里主要说的是y轴，以上API 可以理解为表格内容区高度固定为400px，多出的将以滚动条的形式展现。

二、实现：

首先，在vue代码的data中设置一个变量，用于获取当前屏幕的高度，如：data() {

return {

windowHeight: document.documentElement.clientHeight,   //实时屏幕高度

}

}

然后在 mounted事钩子中增加window.onresize事件，如：mounted() {

window.onresize = () => {

return (() => {

window.fullHeight = document.documentElement.clientHeight;

this.windowHeight = window.fullHeight;

})()

};

},

在调整页面时触发重新获取页面窗口大小事件。

创建一个watch监听，如：watch: {

windowHeight (val) {

console.log("实时屏幕高度：",val, this.windowHeight );

},

},

实时看下具体的页面窗口高度。

最后，在上述table中，将y轴的固定数值，修改为动态数值，如： 

以上减去的490，为当前页面其他元素的高度，这样就可以根据自己实际的页面情况，让table自适应高度了。