Ant Design vue table 自适应页面高度

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

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

一、说明:

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

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

image.png

二、实现:

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

qrcode