给vue，element-ui中的table添加动态的高度

需求：

1.筛选的条件不固定（筛选的高度不固定），数据不多的情况下所加起来的高度不超过页面显示的高度，正常显示；
2.如果数据超多，数据显示的高度加起来超过了当前页面的高度，table出现滚动条，页面不出现滚动条，分页组件依然可以显示

搜索条件

 <div class="searchForm" ref="searchForm">放置搜索条件的地方</div>

js中封装好的table的高度

/**
 * table的max-height高度
 * @param that，解决this指向问题
 * @param val，固定的站位高度（例如：分页高度）
 * @param name，动态站位的高度获取的name（例如：查询动态的查询条件）
 * @returns {number}，返回可用的高度
 */
export function tableHeight(that, val=32, name) {
    let searchFormHeight = that.$refs[name].clientHeight // 可变的查询高度
    let pageHeight = document.documentElement.clientHeight // 可用窗口的高度
    let tableHeight = Number(pageHeight - (searchFormHeight + val)) // 计算完之后剩余table可用的高度
    return tableHeight + 'px'
}

将table的高度js文件单独引入页面，或者挂载到全局方法

 mounted(){
    // 页面加载的时候设置table的高度
    this.tableHeight = tableHeight(this,40,'searchForm')
    // 页面大小该变的时候（缩放页面）设置table的高度（可加可不加）
    window.onresize = ()=> {
        this.tableHeight = this.$utils.tableHeight(this,40, 'searchForm')
    }
},

table中高度的使用

<el-table ref="table" :data="data" :max-height="height"></el-table>

数据的条数不多的时候
数据条数超多，页面显示不开
搜索条件的高度不固定