element-ui表格如何自適應(yīng)高度效果示例
1、el-table增加max-height屬性
<el-table :max-height="tableHeight" ref="queryForm">
2、data增加tableHeight變量
data() {
return {
// 表格高度
tableHeight: 200,
}
};3、mounted獲取計(jì)算高度，每次需要刷新頁(yè)面才能自適應(yīng)
mounted() {
this.$nextTick(() => {
// window.innerHeight 瀏覽器窗口的可見(jiàn)高度，下面的 220 是除了table最大高度的剩余空間。
let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
this.tableHeight = height;
})
},雖然這時(shí)候，已經(jīng)可以根據(jù)窗體大小，高度動(dòng)態(tài)變化，但是，還要每次刷新才行……
所以，我們需要加一個(gè)監(jiān)聽(tīng)器即可，監(jiān)聽(tīng)窗體大小變化，一旦變化就執(zhí)行方法重新設(shè)定tableHeight
methods: {
getHeight() {
this.$nextTick(() => {
// window.innerHeight 瀏覽器窗口的可見(jiàn)高度，下面的 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)
},
//可有可無(wú)
destroyed () {
window.removeEventListener('resize', this.getHeight)
}這里還有個(gè)需要注意的地方，就是修改下el-table的css，否則table會(huì)有很多留白，看起來(lái)體驗(yàn)不是很好
這里使用了::v-deep ，否則我們是修改不了 element自帶的樣式。
::v-deep .el-table {
.el-table__body {
height: 100%;
}
}自此，就能達(dá)到table高度自適應(yīng)的效果啦~~，拖拽可視窗口高度時(shí)，表格在實(shí)時(shí)更新數(shù)據(jù)會(huì)出現(xiàn)抖動(dòng)
補(bǔ)充知識(shí)：element ui table組件高度筆記本和臺(tái)式顯示不同
這種情況可能是因?yàn)楣P記本和臺(tái)式的分辨率不同，導(dǎo)致元素的大小顯示不同。您可以通過(guò)設(shè)置表格組件的高度為固定值或百分比來(lái)解決此問(wèn)題，以適應(yīng)不同的設(shè)備。
例如，您可以使用以下 CSS 樣式來(lái)設(shè)置表格組件的高度為 500 像素：
.el-table {
height: 500px;
}或者使用以下 CSS 樣式將表格組件的高度設(shè)置為頁(yè)面高度的 80%：
.el-table {
height: 80vh;
}這樣，無(wú)論在筆記本還是臺(tái)式電腦上，表格組件都會(huì)以相同的高度顯示。
總結(jié)
到此這篇關(guān)于element-ui表格如何自適應(yīng)高度的文章就介紹到這了,更多相關(guān)element-ui表格自適應(yīng)高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法
今天小編就為大家分享一篇在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
基于Vue構(gòu)建簡(jiǎn)單的Markdown編輯器
在現(xiàn)代前端開(kāi)發(fā)中,Markdown作為一種輕量級(jí)的文本標(biāo)記語(yǔ)言,越來(lái)越受到開(kāi)發(fā)者和內(nèi)容創(chuàng)作者的青睞,本文我們就來(lái)使用Vue.js構(gòu)建一個(gè)簡(jiǎn)單的Markdown編輯器吧2025-02-02
vue中的base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL方式
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過(guò)JavaScript的URL.createObjectURL()方法將Base64轉(zhuǎn)換為Blob URL,進(jìn)而轉(zhuǎn)換為File對(duì)象,并可進(jìn)一步轉(zhuǎn)換為PNG或其他格式的圖片,這種轉(zhuǎn)換技術(shù)在前端開(kāi)發(fā)中非常實(shí)用2024-10-10
Vue element-ui父組件控制子組件的表單校驗(yàn)操作
這篇文章主要介紹了Vue element-ui父組件控制子組件的表單校驗(yàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁(yè)+輸入框關(guān)鍵字篩選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁(yè)（3）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
key屬性可以用來(lái)提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會(huì)去改變?cè)械脑睾蛿?shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
2種在vue項(xiàng)目中使用百度地圖的簡(jiǎn)單方法
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡(jiǎn)單的方法，非常實(shí)用，一起來(lái)學(xué)習(xí)下。2018-09-09
vue+element實(shí)現(xiàn)表格新增、編輯、刪除功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)表格新增、編輯、刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
electron?vue?模仿qq登錄界面功能實(shí)現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項(xiàng)目，安裝electron，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08