一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
第一种方法动态设置表格高度
1.动态绑定table的高度值
:height
<el-table :data="tableData" id="table" :height='tableH'></el-table>
2.获取浏览器高度并监听浏览器resize变化
getTableHeight函数里根据元素做了一些计算处理，获取浏览器高度并计算得到表格所用高度。
data: function () {
return {
tableH："",
}
}
mounted () {
this.getTableHeight();
window.addEventListener('resize',this.getTableHeight,false)
},
methods:{
getTableHeight() {
let rect = document.getElementById('table').getBoundingClientRect();
let h = window.innerHeight;
let FooterHeight = 48;
var tableHeight = h - rect.top - FooterHeight;
this.tableH = tableHeight;
},
}
第二种方法动态设置表格高度
1.动态绑定table的高度值
:height
<el-table :data="tableData" id="table" :height='tableH'></el-table>
2.获取浏览器高度并监听浏览器resize变化
data: function () {
return {
tableH: `${window.innerHeight}` - 118,
}
},
mounted: function () {
// 表格高度
window.addEventListener('resize', () => {
this.tableH = `${window.innerHeight}` - `${document.getElementById('table').getBoundingClientRect().top}` - 48;
})
}
注： 通过window.innerHeight获取窗口的高度， 再获取表格上方的高度document.getElementById('table').getBoundingClientRect().top， 有兴趣的大家可以去打印document.getElementById('table').getBoundingClientRect() 看看哦， 具体实际情况需根据自己页面定然去设置高度
感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕 推荐一下自己的专栏，欢迎大家收藏关注😊~
