vue表格 一屏显示完

<template>
  <div id="nav" class="app-container">
    <div class="search-container">
        <el-button type="primary" icon="el-icon-download">导出</el-button>
    </div>
    <div class="table-wrapper">
      <el-table
        id="table"
        ref="listTable"
        :height="tableHeight + 'px'"
        :data="table"
        :header-cell-style="{ background: '#f8fbfc' }"
        border
        stripe
      >
        <el-table-column prop="order_num" label="订单编号" width="210" />
        <el-table-column prop="remark" label="订单备注" align="center" width="160" :show-overflow-tooltip="true" />
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        page_index: 1,
        page_size: 20,
      },
      tableTotal: 0,
      table: [],
      tableHeight: 0,
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = document.getElementsByClassName('table-wrapper')[0].offsetHeight
    })
  },
  methods: {
   
  }
}
</script>
<style lang="scss" scoped>
  #nav {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 84px); // 减去header高度
  }
  .table-wrapper {
    width: 100%;
    flex: 1;
  }
  .search-container {
    margin: 5px 0;
    button{
      margin-right: 10px;
    }
  }
</style>