element 表格高度自适应

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="tabless"
      :height="tableH"
    >
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableH: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
　　　　//this.$refs.tabless.$el.offsetTop  表格距离浏览器的高度
　　　　//200 是表格距离底部的高度,留出空间放所需要的东西

      this.tableH = window.innerHeight - this.$refs.tabless.$el.offsetTop - 200;
      //监听窗口的大小变化
      let self = this;
      window.onresize = function () {
        self.tableH =
          window.innerHeight - self.$refs.tabless.$el.offsetTop - 200;
      };
    });
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>