方案一
<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;
},
};