Element UI el-table 表格高度根据浏览器窗口大小动态改变

最新推荐文章于 2024-06-27 15:49:16 发布

唐懒猫

最新推荐文章于 2024-06-27 15:49:16 发布

阅读量363

点赞数 2

分类专栏： JavaScript HTML VUE 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/QQ26843500/article/details/136798765

版权

JavaScript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

文章讲述了如何在Vue.js应用中使用el-table组件创建一个动态高度的表格，通过监听浏览器窗口变化，自动调整表格高度以适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

<el-table :data="tableData" style="width: 100%" :height="tableHeight">
	<el-table-column prop="date" label="日期" width="180"> </el-table-column>
</el-table>

created() {
	// 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
	this.tableHeight = window.innerHeight - 100
},
mounted() {
	// 设置表格高度
	this.tableHeight = window.innerHeight - 100
	// 监听浏览器窗口变化，动态计算表格高度，
	window.onresize = () => {
		return (() => {
			this.tableHeight = window.innerHeight - 100
		})()
	}
}