<template>
<el-table ref="tableRef" :height="tableHeight" ...></el-table>
<template>
<script>
export default {
data() {
return {
// 表格默认高度
tableHeight: 500,
}
},
created() {
// 每次窗口有变化时动态获取窗口的高度, 来计算表格的高度
window.onresize = () => {
this.calcTableHeight()
}
// 首次进来先自动计算一次
setTimeout(() => {
this.calcTableHeight()
}, 500)
},
methods: {
// 动态计算表格的高度
calcTableHeight() {
if (this.$refs.tableRef) {
this.tableHeight = window.innerHeight - this.$refs.tableRef.$el.getBoundingClientRect().top - 80
}
},
}
}
实现表格动态高度
最新推荐文章于 2023-09-13 15:47:41 发布