1. 前言
- 這篇文章的起因是上篇文章el-table增加頂部滾動(dòng)條
2. 模板
- el-table 增加 height 屬性
<el-table ref="myTable" :data="tableData" :height="tableData.length ? tableHeight : 150"
- 沒有數(shù)據(jù)的時(shí)候也要給個(gè)高度,顯示表頭,和表格為空的顯示文本
- 這個(gè)高度是計(jì)算屬性
computed來實(shí)現(xiàn)的,我沒有單獨(dú)寫set get方法,所以并不能直接 this.tableHeight = 0
- 這個(gè)在請(qǐng)求列表為空的時(shí)候需要設(shè)置,所以我直接在這設(shè)置了
3. 數(shù)據(jù)
computed: {
tableHeight() {
// 在這里使用 calc 函數(shù)計(jì)算表格高度
return `calc(${this.windowHeight}px - ${this.tableTop}px - 50px)`;
},
},
- 我這里底部總是多一節(jié),所以減去了個(gè) 50px ,也留個(gè)底部間距
tableTop: 0, // 表格距離頂部的初始值
windowHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
4. 邏輯處理
mounted() {
this.$nextTick(() => {
this.tableTop = this.$refs.myTable.$el.getBoundingClientRect().top;
this.handleResize();
});
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
- 這里使用了
$nextTick, 獲取高度可能不是很準(zhǔn)確,因?yàn)镈OM 渲染和獲取高度的時(shí)機(jī)有關(guān),所以寫到$nextTick 保證DOM渲染完畢
destroyed() {
// 組件銷毀時(shí)移除事件監(jiān)聽
window.removeEventListener('resize', this.handleResize);
},
handleResize() {
// 更新窗口高度
this.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
},
參考資料
初心
我所有的文章都只是基于入門，初步的了解枫夺；是自己的知識(shí)體系梳理,如有錯(cuò)誤,道友們一起溝通交流;
如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;
共勉
