elementui table高度自适应屏幕大小变化，固定表头，滚动表单body

情景分析：

1. 有一个普通列表页，页面滚动时表头不会固定，向上滚动表头会被遮住，体验极差；

2. 比如有搜索栏，页面滚动条让搜索栏也被滚动，滑到页面后半部分就不能搜索了，要滚到页面顶部才可以看到搜索框，输入搜索。

大致如下图所示：

将页面尺寸变小时：

 将页面尺寸变大时：

 

 解决方法：

• 给table设置属性   :max-height="tableHeight"
• 根据获取浏览器高度 - 页面固定的部分高度 = tableHight
• 添加resize事件，监听页面

具体代码：

 

import variables from '@/assets/styles/variables.scss';
//variables 里已经定义好了页面上的nav高度、搜索栏高度、bodypadding、margin变量，直接引入计算即可
    mounted() {
        this.$nextTick(() => {
            this.getTableHeight();
        });
        window.addEventListener('resize', this.getTableHeight);
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.getTableHeight);
        //一定记得在页面关闭前销毁监听的resize事件，不然多次刷新后页面会因为内存泄漏崩溃
    },

    methods: {
       //计算页面高度
        getTableHeight() {
            this.tableHeight = this.getTableHeight();
            this.tableHeight = this.tableHeight - this.freeTableHeight;
        },
        
        //获取减去除table表单页其余的高度值
        getTableHeight() {
             let computedArr = [
                variables.appHeaderNavHeight,
                variables.appContentOperatorHeight,
                variables.appContentMargin,
                variables.appContentPadding,
                variables.baseFormSmallHeight,
                variables.appContentListOperatorMarginBottom,
                variables.appPaginationMarginTop,
                variables.baseFormSmallHeight,
                variables.appContentPadding,
                variables.appContentMargin,
            8
            ];
        //将不是数值的例如10px 转为 10，相加
        let computedHeight = computedArr.reduce(function(itemA, itemB) {
        return parseInt(itemA) + parseInt(itemB);
        }, 0);
        return window.innerHeight - computedHeight;
        }
        
    }