解決element的Table表格組件的高度問題( height只能是數字或者字符串 ),故需用js實現了height: calc(100vh - 260px) 的效果

一、定義獲取瀏覽器窗口高度的js文件

相當於用js實現了 height: calc(100vh - 260px); 的效果

注意： 260 是頂部和底部導航以及部分自定義佈局 ；

autoTableHeight.js

//獲取瀏覽器窗口高度,處理Element的Table組件的高度問題（height只能是數字或者字符串）
function autoTableHeight() {
    var winHeight = 0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if (document.body && document.body.clientHeight) {
        winHeight = document.body.clientHeight;
    } //通過深入Document內部對body進行檢測，獲取瀏覽器窗口高度
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
    // 260  是頂部和底部導航以及部分自定義佈局  ；相當於用js實現了 height: calc(100vh - 260px); 的效果
    return winHeight - 260;
}

//瀏覽器窗口變化時
window.onresize = function() {
    autoTableHeight();
};

//瀏覽器重新加載時
window.onload = function() {
    autoTableHeight();
};

export default autoTableHeight;

在組件中引入js文件，並給el-table綁定height

1. 在組件內部，el-table綁定height, :height="tableHeight"
2. 表格設置height屬性後，表頭得以固定，且超出該高度會出現滾動條
3. 注意，我這裏省去了頭部和頂部以及側邊欄的代碼。

<template>
  <div class="inform-manage comn_bg">
          <el-table
            :data="tableData"
            class="multiple-table"
            border
            :highlight-current-row="true"
            :height="tableHeight"
            :default-sort="{ prop: 'name', order: 'descending' }"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%;"
          >
            <el-table-column
              fixed="left"
              type="selection"
              width="55"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              prop="name"
              label="通知公告標題"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              prop="address"
              label="發佈單位"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              sortable
              prop="remark"
              label="發佈人"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              sortable
              prop="date"
              label="發佈時間"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              sortable
              prop="address"
              label="內容概述"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              sortable
              prop="remark"
              label="備註"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column sortable label="排序號" width="120" align="center">
              <template slot-scope="scope" align="center">
                <el-input
                  class="sort_input"
                  v-model="scope.row.sortNum"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column sortable label="狀態" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status | filterStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable label="操作" align="center" width="200">
              <template slot-scope="scope">
                <button class="download_btn">
                  <i class="el-icon-download"></i> 下載
                </button>
                <button class="detail_btn">
                  <i class="el-icon-tickets"></i> 發佈詳情
                </button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import autoTableHeight from "@/utils/autoTableHeight.js"; // 1. 引入剛剛定義的js文件 
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
          remark: "備註信息1",
          sortNum: 1,
          status: true
        },
        {
          date: "2016-05-02",
          name: "張曉",
          address: "上海市普陀區金沙江路 1518 弄",
          remark: "備註信息2",
          sortNum: 2,
          status: false
        },
        {
          date: "2016-05-04",
          name: "阿厭",
          address: "上海市普陀區金沙江路 1518 弄",
          remark: "備註信息3",
          sortNum: 3,
          status: true
        }
      ],
      multipleSelection: []
    };
  },
  computed: {
    tableHeight() { 
      return autoTableHeight(); // 2. 調用函數，返回高度
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("通知table data:", val);
    },
    handleSortChange({ column, prop, order }) {
      console.log("通知頁排序變化：", prop);
    }
  },
  filters: {
    filterStatus(status) {
      return status ? "已發佈" : "待發布";
    }
  }
};
</script>
<style lang="scss">
.inform-manage {
  .download_btn {
    background: $icon_color;
    border: 1px solid $icon_color;
    color: #fff;
    padding: 2px;
    cursor: pointer;
  }
  .detail_btn {
    background: #ffb800;
    border: 1px solid #ffb800;
    margin-left: 20px;
    color: #fff;
    padding: 2px;
    cursor: pointer;
  }
}
</style>