el-table 表格最大高度max-height的問題解決
寫在前面
在工作中遇到了多個滾動條的情況，后來仔細研究了一下是因為el-table的max-height設置為固定值導致的，當窗口區(qū)域過小就會出現(xiàn)這種情況。
知道問題了就可以對癥下藥，根據(jù)屏幕的大小動態(tài)設置max-heigth。在網(wǎng)上看了很多的方案都是減去除了表格以外其他元素的寬高來動態(tài)計算高度，顯然這種方法不夠健壯一旦新增或減少元素，我們就必須調整代碼。于是我想到頁面流的特性，可以用 flex: 1 + offsetHeight 的方式實現(xiàn)，flex: 1 始終會撐滿剩下區(qū)域，那我們就可以獲取到flex: 1 的容器高度設置給el-table從而實現(xiàn)動態(tài)高度，無需手動計算，這樣既簡單又健壯。
Vue3寫法
為了增加代碼的可復用性，Vue3中可以將相關的代碼封裝成一個hooks。這段代碼中最主要的功能是當窗口變化時獲取到容器的 offsetHeight 設置給 maxHeight。
function useMaxWidth() {
const tableRef = ref();
const maxHeight = ref(0);
onMounted(() => {
window.addEventListener("resize", resize);
});
onUnmounted(() => {
window.removeEventListener("resize", resize);
});
function resize() {
maxHeight.value = 0;
nextTick(() => {
maxHeight.value = tableRef.value.offsetHeight;
});
}
return { maxHeight, tableRef, resize };
}接著，在setup 中使用 useMaxWidth， 在加載完數(shù)據(jù)之后，執(zhí)行一次 resize() 來獲取maxHeight， 并導出tableData、 tableRef 和 maxHeight。
const App = {
setup() {
let tableData = ref([]);
onBeforeMount(async () => {
tableData.value = await new Promise((resolve) => {
setTimeout(() => {
const data = new Array(100).fill({
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1518 弄",
});
resolve(data);
}, 2000);
});
});
const { maxHeight, tableRef, resize } = useMaxWidth();
resize();
return {
tableData,
tableRef,
maxHeight,
};
},
};
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");最后，在 el-table外定義了一個 flex:1 的容器，將 tableRef 綁定到上面，并將 tableData 和 maxHeight 綁定到 el-table 上。
<main class="HolyGrail-content" ref="tableRef">
<el-table :data="tableData" :max-height="maxHeight">
<el-table-column prop="date" label="日期" sortable width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180">
</el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column>
</el-table>
</main>.HolyGrail-content {
flex: 1;
}Vue2寫法
在 Vue3 中可以通過 hooks 復用代碼，Vue2 則可以將功能封裝成一個 table-container 組件，并將 el-table 插入其中。
<template>
<div class="table-container" ref="table">
<slot :maxHeight="maxHeight"></slot>
</div>
</template>
<script>
export default {
name:'',
data () {
return {
maxHeight: 0
}
},
mounted() {
window.addEventListener('resize', this.resize);
},
beforeDestroy() {
window.removeEventListener('resize', this.resize)
},
methods:{
resize() {
this.maxHeight = 0;
this.$nextTick(() => {
this.maxHeight = this.$refs.table.offsetHeight;
})
}
},
}
</script>
<style scoped>
.table-container {
height: 100%;
}
</style>
<table-container ref="tableContainer" v-slot="slotProps">
<el-table :data="tableList" :max-height="slotProps.maxHeight" >
</el-table>
</table-container>當然，也需要在接口數(shù)據(jù)加載完成的時候執(zhí)行一下 resize() 方法。
this.$refs.tableContainer.resize();
重新設置max-height表格會重新計算， 會導致 scrollTop 會重置為0，如何實現(xiàn)上拉加載，下拉刷新！|下拉加載的滾動條會回到頂部，因此可以只在第一頁計算最大高度。
if(this.listQuery.page === 1) this.$refs.tableContainer.resize();
到此這篇關于el-table 表格最大高度max-height的問題解決的文章就介紹到這了,更多相關el-table max-height內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue組件打包并發(fā)布到npm的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06
Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫
這篇文章主要介紹了Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了VUE中攔截請求并無感知刷新token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue父組件異步獲取數(shù)據(jù)傳給子組件,需要的朋友可以參考下2018-07-07
Vue的響應式實現(xiàn)是借助Object.defineProperty通過重寫getter和setter方法來進行的數(shù)據(jù)劫持，Vue3通過Proxy代理攔截對象中任意屬性的變化，通過Reflect反射對源對象的屬性進行操作，然后再在get里收集依賴在set里派發(fā)更新2023-03-03
vue打包部署到springboot并通過tomcat運行的操作方法
這篇文章主要介紹了vue打包部署到springboot并通過tomcat運行的操作方法,本文通過實例圖文并茂的形式給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
在vue中使用screenfull?依賴,實現(xiàn)全屏組件方式
這篇文章主要介紹了在vue中使用screenfull?依賴，實現(xiàn)全屏組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue定時器清除不掉,導致功能頻繁執(zhí)行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue使用axios導出后臺返回的文件流為excel表格詳解
這篇文章主要介紹了vue使用axios導出后臺返回的文件流為excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08