方案一
<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-paginationstyle="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: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',},{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',},{date: '-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;},};
