vue js实现table高度自适应

* 自适应表格的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
    })
    }

正常页面时

头部高度发生换行时

未使用该函数时，表格元素发生超出页面显示

使用该函数动态高度时，会适应剩余高度，防止表格超出页面大小