element table表头固定，高度自适应

element组件源地址：组件 | Element

在原组件中表头固定需要设置height高度，但是设置以后浏览器高度变化table不会变化，会出现一系列问题，就需要监听浏览器高度变化给height重新赋值。

关键代码

      <el-table
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
      >

      data() {
        return {
          clientHeight: document.documentElement.clientHeight,
          tableHeight:500,// 定义table高度
        }
      },

      mounted() {
        //  重置浏览器高度
        window.onresize = () => {
          this.clientHeight = document.documentElement.clientHeight;
        }
      },

      created() {
        //  初始值，自己定义
        this.tableHeight = this.clientHeight - 126
      },

      watch: {
        //  监听高度变化
        clientHeight(newValue, oldValue) {
          if(newValue) {
            this.getTableHeight()
          }
        }
      }

      methods:{
        // 防抖
        getTableHeight: debounce(function() {
          // 给table高度赋值
          this.tableHeight = this.clientHeight - 126
        }, 300),
      },

完整代码：

<template>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    import {debounce} from "../../../../utils/utils";

    export default {
        name: "hotTable",
      data() {
        return {
          clientHeight: document.documentElement.clientHeight,
          tableHeight:500,// 定义table高度
          tableData: [{
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }]
        }
      },
      mounted() {
        //  重置浏览器高度
        window.onresize = () => {
          this.clientHeight = document.documentElement.clientHeight;
        }
      },
      created() {
        //  初始值，自己定义
        this.tableHeight = this.clientHeight - 126
      },
      methods:{
        // 防抖
        getTableHeight: debounce(function() {
          // 给table高度赋值
          this.tableHeight = this.clientHeight - 126
        }, 300),
      },
      watch: {
        //  监听高度变化
        clientHeight(newValue, oldValue) {
          if(newValue) {
            this.getTableHeight()
          }
        }
      }
    }
</script>

<style lang="scss">
</style>

debounce防抖代码：防抖在vue中的实现（转载） - 从入门到入土 - 博客园 (cnblogs.com)   项目里边创个工具，用的时候直接引用就可以