解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 260px) 的效果

注：也可直接将el-table的height属性绑定为字符串：calc(100vh - 260px) 实现为同样的效果， 260 是顶部和底部导航以及部分自定义布局 ；例：

<template>
  <el-table
    :data="tableData"
    :height="` calc(100vh - 260px)`"
    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-column
      prop="address"
      label="地址">
    </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>

一、定义获取浏览器窗口高度的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进行检测，获取浏览器窗口高度
    else 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>