vue3 设置el-table 高度自适应（2种方案）

方案一

<template>
  <div class="contenWrap">
    <!-- 表格内容显示区域   -->
    <el-table :height="tableHeight" class="userTable" :border="true" :data="tableData">
      <el-table-column prop="date" label="日期" align="center" width="200"> </el-table-column>
      <el-table-column prop="name" label="姓名" align="center" width="200"> </el-table-column>
      <el-table-column prop="address" align="center" label="地址"> </el-table-column>
    </el-table>
    <!--   分页 -->
    <el-pagination
      style="padding-top: 15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>

<script setup>
  import { ref, reactive, watch, computed, onMounted, watchEffect, provide } from 'vue';
  import { menuTreeApi, documentDetailApi } from '@/apis/index.js';
  import { promiseToArr, showElLoading, getIdTemplate } from '@/utils/common.js';
  import { ElMessage } from 'element-plus';
  import { useStore } from 'vuex';
  const store = useStore();
  const tableHeight = ref('');
  const currentPage = ref(1);
  const tableData = ref([
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
  ]);

  const getTableHeight = () => {
    let tableH = 47 + 15 + 40; //距离页面下方的高度
    let tableHeightDetil = window.innerHeight - tableH;
    if (tableHeightDetil <= 300) {
      tableHeight.value = 300;
    } else {
      tableHeight.value = window.innerHeight - tableH;
    }
  };
  const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
  };
  const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
  };

  onMounted(() => {});

  watchEffect(() => {
    getTableHeight();
  });
</script>

<style lang="scss" scoped>
  .contenWrap {
    .userTable {
    }
  }
</style>

方案2 使用vue的自定义指令方式（推荐）

/**
 * fixTableHeight
 * 动态根据页面高度设置table的高度
 */
export default {
  mounted(el, binding) {
    el.windowChange = () => {
      let bottomHeight = binding?.value || 0;
      el.timer && clearTimeout(el.timer);
      el.timer = setTimeout(() => {
        el.style.transition = 'height 0.3s';
        el.style.height = `${
          window.innerHeight - el.getBoundingClientRect().top - 32 - bottomHeight
        }px`;
        setTimeout(() => {
          el.style.transition = '';
        }, 334);
      }, 300);
    };
    el.windowChange();
    window.addEventListener('resize', el.windowChange);
  },
  beforeUnmount(el) {
    window.removeEventListener('resize', el.windowChange);
    clearTimeout(el.timer);
    delete el.timer;
    delete el.windowChange;
  },
};