vue Table 表格自适应窗口高度，表头固定

当表格内纵向内容过多时，可选择固定表头。

代码很简单，其实就是在table 里面定一个 height 属性即可。

<template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

问题出现了，不同的屏幕分辨率下，高度是不一样的，如果直接定义成固定的，肯定是不理想的

解决办法

<template>
  <el-table
    :data="tableData"
    :height="windowHeight"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        windowHeight: window.innerHeight,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
	mounted() {
	  // 监听窗口大小变化事件
	  window.addEventListener('resize', this.handleResize);
	},
	beforeDestroy() {
	  // 移除事件监听器，避免内存泄漏
	  window.removeEventListener('resize', this.handleResize);
	},
	methods: {
	    handleResize() {
	      // 更新窗口高度
	      this.windowHeight = window.innerHeight;
	    }
	 }
  }
</script>

其实就是监听窗口的大小变化，然后动态调整 windowHeight 属性值即可。

到了这一步，基本上满足大部分人的需求，但是如果表格有 合计行 时，此时合计行是不出现的

如下图

根据调试，发现该问题应该属于组件bug，表格主体中给 footer留的高度不够导致，重新布局即可。

//重置表格
updated() {
   this.$nextTick(() => {
         this.$refs.tableList.doLayout()
     })
 },

doLayout 方法会重新计算表格的布局，适用于以下场景：

1. 表格数据动态变化：当表格数据发生变化时，调用 doLayout 可以确保表格正确渲染。
2. 表格尺寸变化：当表格的父容器尺寸发生变化时，调用 doLayout 可以重新调整表格的列宽和行高。
3. 手动触发布局更新：在某些情况下，表格的布局可能不会自动更新，需要手动调用 doLayout。

逻辑很简单，实现起来也很简单，大家如果解决了问题，点点赞吧