vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高

最新推荐文章于 2025-06-24 11:18:14 发布

转载最新推荐文章于 2025-06-24 11:18:14 发布 · 2.3k 阅读

vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种在Vue项目中使表格滚动条在不同设备上（如手机、iPad）自适应屏幕高度的方法。通过监听窗口尺寸变化并动态调整表格高度，确保了表格在各种设备上的显示效果一致。

在开发中经常可以遇到在不同的浏览器中，加载的图形与自己预期的不同table在手机端中显示滚动框正常，但是当切换到ipad端时，由于height没有随着浏览器的变化而动态变化，就导致表格的滚动框也是不变的，这样就会使得加载的效果不好。下面是我在网上搜索的解决方法：
此办法适用于vue开发的项目，
在data中设置：

1 tableHeight:"500",
2 screenHeight:window.innerHeight,

2.在mounted中设置：

1   mounted() {
2       const that = this
3       window.onresize =()  =>{
4         return (()=>{
5           window.screenHeight = window.innerHeight
6           this.screenHeight = window.screenHeight;
7         })()
8       }
9     },

3.在watch中监听：

1   watch:{
2       screenHeight(val){
3         this.screenHeight = val
4         this.tableHeight = this.screenHeight - 250
5       }
6     },

备注：
window.innerheight 返回窗口的文档显示区的高度.
onresize 事件会在窗口或框架被调整大小触发。
overflow:scroll 样式文件中规定当文本内容超过设置的宽度和高度的时候，就会出现滚动条。
document.body.clientHeight —指body对象的宽度（也指可见区域）