关于vue使用elementui的table固定表头后导则的高度留白问题

问题分析

   个人分析应该是数据问题

   在elementui使用table表格的height过程中，height设置了一个固定的高，如果当数据量足够时（超出这个给定的固定高度），能够正常的出现滚动条没问题，但是当数据量过少时（渲染出来的列表没撑满这个给定的高度），会导则高度有一部分的留白

话不多说，上操作

解决步骤

1、首先是最重要的高度留白问题

既然固定高度不行，那就设置成最大高度，这样数据量少的时候就不会出现高度空白问题

将 :height 改成 :max-height

1）html部分：

   注：tableHeight在下文data中声明

<el-table :max-height="tableHeight"  :data="tableData">

2、动态最大高度的计算

1）、data部分：

data(){
  return:{
          
        tableHeight: window.innerHeight - 300, //表格动态高度，300为页面固定头部的高度，可根据不同的页面需求更改

        screenHeight: window.innerHeight, //内容区域高度
    
    }
}

2）、 监听screenHeight从而改变table的高度

  watch: {
    // 监听screenHeight从而改变table的高度
    screenHeight(val) {
      this.screenHeight = val;
      this.tableHeight = this.screenHeight - 300;
    },
  },

3）、给mounted挂载window.onresize事件

  mounted() {
    // window.onresize:浏览器尺寸变化响应事件
    window.onresize = () => {
      return (() => {
        // window.innerHeight:浏览器的可用高度
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
}

ps:最主要的无非就是将:height改成:max-height

完毕，祝诸君生活愉快，码路无bug~~