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防抖程式碼：