element中使table表格的高度自适应

最新推荐文章于 2025-05-22 17:20:34 发布

Co_Tricker

最新推荐文章于 2025-05-22 17:20:34 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java 文章标签： table高度

本文链接：https://blog.youkuaiyun.com/qq_39544982/article/details/95942836

java 专栏收录该内容

0 篇文章

订阅专栏

博客介绍了使用Vue.js和Element组件解决table表格高度自适应问题。设置固定高度的表格在浏览器大小改变后显示不佳，通过特定代码可使表格高度随浏览器高度自适应，但目前监听存在问题，需刷新页面才能在浏览器高度改变后重新自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue.js和element组件。
table表格中，由于设置高度为固定值，当浏览器大小发生改变后，会很丑，所以。

<el-table ref="table" :data="allSceneTable.scenes" border stripe style="width: 100%" :height="allSceneTable.tableHeight" v-loading="allSceneTable.loading"
										    element-loading-text="拼命加载中"
										    element-loading-spinner="el-icon-loading"
										    element-loading-background="rgba(0, 0, 0, 0.8)">

:height=“allSceneTable.tableHeight”


  data: {
		allSceneTable: {
			loading: false,
			tableHeight: 50,
		},
    },

that. $r e f s . t a b l e .$ el.offsetTop为屏幕高度，-30是因为个人的table表格下有分页，把分页的高度算上，不然进去后看不到分页。
refs和el前有$符号。上面没显示出来。

 mounted: function () {
    	var that = this;
    	setTimeout(()=> {
    		that.allSceneTable.tableHeight = window.innerHeight - that.$refs.table.$el.offsetTop - 30;
    	},100);
   	}

监听到目前为止有问题，暂未处理，以上代码加入后table表格的高度随浏览器高度自适应，但是，由于未监听，浏览器高度改变后，只能刷新当前页面让它自适应。