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 瀏覽器窗口的可見高度，下面的 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)聽器即可，監(jiān)聽窗體大小變化，一旦變化就執(zhí)行方法重新設(shè)定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())
},
//可有可無(wú)
destroyed () {
window.removeEventListener('resize', this.getHeight())
}這里還有個(gè)需要注意的地方，就是修改下el-table的css，否則table會(huì)有很多留白，看起來(lái)體驗(yàn)不是很好
這里使用了::v-deep?，否則我們是修改不了 element自帶的樣式。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-502776.html
::v-deep .el-table {
.el-table__body {
height: 100%;
}
}自此，就能達(dá)到table高度自適應(yīng)的效果啦~~，拖拽可視窗口高度時(shí)，表格在實(shí)時(shí)更新數(shù)據(jù)會(huì)出現(xiàn)抖動(dòng)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-502776.html
到了這里，關(guān)于element-ui 表格如何自適應(yīng)高度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[element-ui] el-table表格頭添加圖標(biāo)-鼠標(biāo)移入顯示el-tooltip提示信息](https://imgs.yssmx.com/Uploads/2024/02/512233-1.png)
