elementui table组件 滚动高度自适应一屏大小、高度占满剩余空间

场景：

        后台管理系统，数据常用表格处理、配合搜索、分页、增删改查等...

        通常最佳视觉为一屏展示，顶部有导航、查询条件等，中间表格最高占满剩余高度。

        给table设置高度，超出可滚动，但不好适应不同尺寸的屏幕。

        不给table设置高度，则内容多的情况会超出一屏。

处理：

        1.给table包一层父级元素（table-box）

        2.给table-box设置高度，通常顶部内容都是定高的，所以使用calc(100vh - topHieight)就可以得到适应屏幕的剩余高度；如果使用flex布局，在顶部区域定高的情况下，设置table-box的flex-gow: 1;占满剩余空间，也可以适应剩余高度。

        3.用ref标识table-box，在mounted生命周期函数里使用js获得容器高度this.$refs.tableBox.clientHeight

                *减去翻页的高度，因为容器包含了表格和翻页

        4.将获得的高度赋予table

                *elementui table的height用于控制滚动高度，内容超出后滚动。

                *这里面的height用于内部设定滚动区域的高度，不会动态更新，所以使用v-if等获取到tableHeight后再显示，方可起效。

                *示例中使用max-height代替height, 可适应内容不够一屏时的自动高度。

<div
    class="table-box"
    ref="tableBox"
>
    <el-table
        v-if="tableHeight"
        :max-height="tableHeight + 'px'"
        :data="tableData"
    >
        <el-table-column></el-table-column>
    </el-table>
</div>

data(){
    return {
        tableHeight:0,
    }
},
mounted(){
    //减去翻页的高度，因为容器包含了表格和翻页
    this.tableHeight = this.$refs.tableBox.clientHeight - 40;
}

.table-box{
    height:calc(100vh - 190px);/*示例中顶部区域固定高度190px*/
}