vue固定表头动态监听窗口大小，表格高度自动调整

vue固定表头动态监听窗口大小，表格高度自动调整

适用背景：

当页面数据很多，limit改为20，50，100时，下滑列表需要看到数据与表头数据项对应，且高度随着浏览器的窗口高度自适应：
1.需要表头固定
2.table的高度随窗口大小自动变化

步骤：

第一步，需要固定表头，element组件中固定表头的属性是height

而我们需要动态变化高度，就要用到 流体高度max-height属性替代这个height

代码：

 <el-table
        v-loading="dataListLoading"
        :data="dataList"
        ref="multipleTable"
        :row-key="getRowKeys"
        :max-height="tableHeight"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%"
      >
      <!--表格内容项
		 <el-table-column>...</el-table-column>
 		-->
</el-table>

解释： 将max-height赋值给一个全局变量tableHeight,用来存储表格的高度。
需要在data里面定义这个全局变量tableHeight

data(){
	return{
	tableHeight: 165,
	};
}

第二步，监听窗口大小，动态变化表格高度

mounted(){
    this.$nextTick(function (){
        this.tableHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 165;
        // 监听窗口大小变化
        let self = this;
        window.onresize = function(){
            self.tableHeight = window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 165;
        }
    })
  },

165为预留高度，可以根据具体情况调整留有的高度。