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 属性值即可。

逻辑很简单，实现起来也很简单，入不了众老鸟的眼