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

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

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

一、说明:

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

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

12094cae69da3e174a7cefcefa1ed705.gif

二、实现:

首先,在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自适应高度了。

你可能感兴趣的:(ant,design,自适应高度表格)