element-ui表格如何自適應高度效果示例
1、el-table增加max-height屬性
<el-table :max-height="tableHeight" ref="queryForm">
2、data增加tableHeight變量
data() {
return {
// 表格高度
tableHeight: 200,
}
};3、mounted獲取計算高度，每次需要刷新頁面才能自適應
mounted() {
this.$nextTick(() => {
// window.innerHeight 瀏覽器窗口的可見高度，下面的 220 是除了table最大高度的剩余空間。
let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
this.tableHeight = height;
})
},雖然這時候，已經(jīng)可以根據(jù)窗體大小，高度動態(tài)變化，但是，還要每次刷新才行……
所以，我們需要加一個監(jiān)聽器即可，監(jiān)聽窗體大小變化，一旦變化就執(zhí)行方法重新設定tableHeight
methods: {
getHeight() {
this.$nextTick(() => {
// window.innerHeight 瀏覽器窗口的可見高度，下面的 220 是除了table最大高度的剩余空間。
console.log(1111,window.innerHeight);
let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
this.tableHeight = height;
})
}
},
created() {
window.addEventListener('resize', this.getHeight)
},
//可有可無
destroyed () {
window.removeEventListener('resize', this.getHeight)
}這里還有個需要注意的地方，就是修改下el-table的css，否則table會有很多留白，看起來體驗不是很好
這里使用了::v-deep ，否則我們是修改不了 element自帶的樣式。
::v-deep .el-table {
.el-table__body {
height: 100%;
}
}自此，就能達到table高度自適應的效果啦~~，拖拽可視窗口高度時，表格在實時更新數(shù)據(jù)會出現(xiàn)抖動
補充知識：element ui table組件高度筆記本和臺式顯示不同
這種情況可能是因為筆記本和臺式的分辨率不同，導致元素的大小顯示不同。您可以通過設置表格組件的高度為固定值或百分比來解決此問題，以適應不同的設備。
例如，您可以使用以下 CSS 樣式來設置表格組件的高度為 500 像素：
.el-table {
height: 500px;
}或者使用以下 CSS 樣式將表格組件的高度設置為頁面高度的 80%：
.el-table {
height: 80vh;
}這樣，無論在筆記本還是臺式電腦上，表格組件都會以相同的高度顯示。
總結
到此這篇關于element-ui表格如何自適應高度的文章就介紹到這了,更多相關element-ui表格自適應高度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue之監(jiān)聽頁面是否以到底部問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文介紹了基于MessageChannel實現(xiàn)Vue AI流式對話的方案,通過SSE流式解析、時間切片、任務隊列等技術,實現(xiàn)了非阻塞UI渲染和完美處理分包粘包問題,同時提供了一套可復用的Hook,并進行了詳細的對比分析,需要的朋友可以參考下2026-04-04
基于Vue3實現(xiàn)前端埋點上報插件并打包發(fā)布到npm的詳細過程
這篇文章主要介紹了基于Vue3實現(xiàn)一個前端埋點上報插件并打包發(fā)布到npm,本項目采用pnpm進行Monorepo環(huán)境搭建,因為未來這個項目可能會加入更多的工具包，需要的朋友可以參考下2022-10-10
Vue使用Vue Elements實現(xiàn)文件預覽功能
在現(xiàn)代 web 開發(fā)中,用戶與系統(tǒng)的交互體驗越來越重要,而文件上傳和文件預覽是最常見的交互場景之一,本文將詳細介紹如何在 Vue 項目中使用 Vue Elements 來實現(xiàn)文件預覽的功能,包括基本使用方法、常見實例、性能優(yōu)化以及樣式自定義等內容,需要的朋友可以參考下2025-01-01
webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了Vuejs實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
當遍歷一個數(shù)組或枚舉一個對象進行迭代循環(huán)展示時，就會用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了vue中如何動態(tài)設置css樣式的hover，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
一起寫一個即插即用的Vue Loading插件實現(xiàn)
這篇文章主要介紹了一起寫一個即插即用的Vue Loading插件實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10