600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > ant design 自适应高度表格_Ant Design vue table 自适应页面高度

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

时间:2020-04-22 20:03:52

相关推荐

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自适应高度了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。