如果你要求页面内容只能在一屏内显示,不想出现页面竖直滚动条,且页面使用el-table,那么就需要el-table动态计算高度
<el-table
v-loading="loading"
:data="tableData"
:height="tableHeight"
ref="table"
highlight-current-row
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(query.pageNum - 1) * query.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
</el-table>
data() {
return {
tableHeight: 'calc(100vh - 320px)', // 220因为我页面有些元素是固定高度,这里要减掉
mounted() {
this.getTableHeight()
window.addEventListener('resize', this.getTableHeight)
},
methods: {
// 动态计算表格高度
getTableHeight:debounce(function(extraHeight=0) {
this.$nextTick(() => {
const tableHeight = this.$refs?.table?.$el.offsetHeight
console.log('tableHeight:', tableHeight)
if (!isNaN(tableHeight) && typeof tableHeight === 'number') {
const otherHeight = 220 + tableHeight + extraHeight
this.tableHeight = "calc(100vh - " + otherHeight +"px)"
}
})
}, 100, true), // debounce是节流函数,可用可不可用
destroyed(){
window.removeEventListener('resize', this.getTableHeight)
}