element table固定表頭，表的高度自適應解決方法

主要是通過在mounted生命周期中，改變tableHeight的值，來讓表格的高度自適應。

 

標簽：

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

vue中的ref解釋

第一種JS處理方式：

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：表格距離瀏覽器的高度
    }
}

第二種JS處理方式：

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表示你想要調整的表格距離底部的高度（你可以自己隨意調整），因為我們一般都有放分頁組件的，所以需要給它留一個高度　
    }
}

this.$nextTick的使用說明