el-table 固定表頭


fixedTableHeaderMixin.js:

/*
    使用此mixin:
    第一:需要在頁面的el-table配置屬性:ref="table" 和 :height="tableHeight"。
    舉例:
    <el-table ref="table" :height="tableHeight" v-loading="tableLoading" element-loading-text="拼命加載中" :data="tableData">
    第二:需要添加樣式(偶發:有表格沒有出現y軸滾動條的情況)
    .el-table__body-wrapper {
        overflow-y: scroll !important;
    }
 */
export default {
    data () {
        return {
            tableHeight: 250
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.setTableHeight()
            // 監聽窗口大小變化
            window.onresize = () => {
                this.setTableHeight()
            }
        })
    },
    beforeDestroy () {
        // 由於window.onresize是全局事件,在其他頁面改變界面時也會執行,這樣可能會出現問題,需要在離開這個界面時注銷window.onresize事件
        window.onresize = null
    },
    methods: {
        setTableHeight () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 115
            console.log('this.tableHeight')
            console.log(this.tableHeight)
        }
    }
}

參考:https://www.cnblogs.com/muou2125/p/9952491.html
https://www.cnblogs.com/aidixie/p/10754683.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM