* 自适应表格的max-height,即使头部元素发生换行也不影响,不是表格也可以用,自行调整底部距离即可。(此函数没有监听窗口resize)*
函数
export async function setTableHeight(table) {
let tableHeight = 0 //表格max-height
let safeDistance = 10 // 页面在iframe时留出部分高度
let bottomHeight = 80 //留出表格分页栏高度
await this.$nextTick(() => {
let {
top
} = document.querySelector(table).getBoundingClientRect() //获取元素四个方向的距离
tableHeight = document.getElementById('app').offsetHeight - top - bottomHeight
if (self.frameElement && self.frameElement.tagName == 'IFRAME') {
tableHeight = tableHeight - safeDistance
}
})
return tableHeight
}
使用
//传入表格的id或class 注意格式 .class / #id ,不是表格也可以用,自行调整底部距离即可
// 将tableHeight 作为表格的 max-height 即可 <el-table :max-height="tableHeight">
mounted(){
this.getTheight('.el-table').then((val) => {
this.tableHeight = val
})
}
正常页面时
头部高度发生换行时
未使用该函数时,表格元素发生超出页面显示
使用该函数动态高度时,会适应剩余高度,防止表格超出页面大小