正在阅读:
- 首页 » 开发运维 » 前端 » Ant Design vue table 自适应页面高度
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轴的固定数值,修改为动态数值,如:
<a-table :scroll="{x: 5000, y: windowHeight-490}"> </a-table>
以上减去的490,为当前页面其他元素的高度,这样就可以根据自己实际的页面情况,让table自适应高度了。
该日志由 bemender 于 2021年01月16日 发表
转载请注明文本地址:https://www.bemhome.com/post/94.html