使用 ElementUI 的 Table 组件时需要固定表头和表格高度自适应

总结

主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应

实例和解决方案

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

方案一：

export default {
    data(){
        return {
            tableHeight: 50,
            tableData: []
        }
    },
    mounted:function(){
        setTimeout(() => {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
        },100);
　　　　　// 此处需要通过延迟方法来设置值，不然会出现值已更新，但页面没更新的问题
        // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
    }
};

方案二：

export default {
    data(){
        return {
            tableHeight: 50,
            tableData: []
        }
    },
    mounted:function(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 50
            }
        })
        // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
　　　　 // 50表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
    }
};