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