1. 前言

1. 这篇文章的起因是上篇文章el-table增加顶部滚动条

---

2. 模板

1. el-table 增加 height 属性

 <el-table  ref="myTable" :data="tableData" :height="tableData.length ? tableHeight : 150"

2. 没有数据的时候也要给个高度,显示表头,和表格为空的显示文本
3. 这个高度是计算属性computed来实现的,我没有单独写set get方法,所以并不能直接 this.tableHeight = 0
4. 这个在请求列表为空的时候需要设置,所以我直接在这设置了

---

3. 数据

• 计算属性

 computed: {
 tableHeight() {
            // 在这里使用 calc 函数计算表格高度
            return `calc(${this.windowHeight}px - ${this.tableTop}px - 50px)`;
        },
   },

1. 我这里底部总是多一节,所以减去了个 50px ,也留个底部间距

---

• data

            tableTop: 0, // 表格距离顶部的初始值
            windowHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,

---

4. 逻辑处理

• mounted

    mounted() {
        this.$nextTick(() => {
            this.tableTop = this.$refs.myTable.$el.getBoundingClientRect().top;
            this.handleResize();
        });

        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    },

1. 这里使用了 $nextTick, 获取高度可能不是很准确,因为DOM 渲染和获取高度的时机有关,所以写到$nextTick 保证DOM渲染完毕

---

• destroyed

    destroyed() {
        // 组件销毁时移除事件监听
        window.removeEventListener('resize', this.handleResize);
    },

---

• methods

        handleResize() {
            // 更新窗口高度
            this.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        },

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉