1. 前言
- 这篇文章的起因是上篇文章el-table增加顶部滚动条
2. 模板
- el-table 增加 height 属性
<el-table ref="myTable" :data="tableData" :height="tableData.length ? tableHeight : 150"
- 没有数据的时候也要给个高度,显示表头,和表格为空的显示文本
- 这个高度是计算属性
computed来实现的,我没有单独写set get方法,所以并不能直接 this.tableHeight = 0
- 这个在请求列表为空的时候需要设置,所以我直接在这设置了
3. 数据
computed: {
tableHeight() {
// 在这里使用 calc 函数计算表格高度
return `calc(${this.windowHeight}px - ${this.tableTop}px - 50px)`;
},
},
- 我这里底部总是多一节,所以减去了个 50px ,也留个底部间距
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, 获取高度可能不是很准确,因为DOM 渲染和获取高度的时机有关,所以写到$nextTick 保证DOM渲染完毕
destroyed() {
// 组件销毁时移除事件监听
window.removeEventListener('resize', this.handleResize);
},
handleResize() {
// 更新窗口高度
this.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
},
参考资料
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
