表格高度自适应
分页跟随表格之后

1. 满屏时出现滚动条

2. 不满屏时不显示滚动条

坑

表格设置maxHeight后不出现滚动条

解决方案

表格外层元素设置max-height
el-table–fit 设置高度100%

.table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}

示例代码

<template><div class="outer-box"><div class="form-box"><DymanicFormref="formRef":inline="true":schema="schema"v-model="searchValue"><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item></DymanicForm></div><div class="table-box"><Table:tableData="tableData":haveCheckBox="true":haveIndex="true":columns="tableColumn":stripe="true":border="true"max-height="100%"@select-change="handleSelectChange"@row-click="handleRowClick"/></div><div class="page-box"><Pagination:total="total"v-model:currentPage="queryParams.currentPage"v-model:currentSize="queryParams.currentSize"@pagination="handleGetTableData"/></div></div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { ItemSchema } from "~/types/dymanic";
import DymanicForm from "~/components/DymanicForm.vue";
import { ElMessage } from "element-plus";const formRef = ref<InstanceType<typeof DymanicForm>>();
const schema = ref<ItemSchema>({userId: {formItem: {label: "用户ID：",},style: {width: "200px",},componentName: "ElInput",placeholder: "请输入用户ID",maxlength: 20,},username: {formItem: {label: "账号：",},style: {width: "200px",},componentName: "ElInput",placeholder: "请输入账号",maxlength: 20,},name: {formItem: { label: "用户名：" },style: {width: "200px",},componentName: "ElInput",placeholder: "请输入用户名",maxlength: 20,},date: {formItem: {label: "日期：",},style: {width: "200px",},componentName: "ElDatePicker",type: "daterange",startPlaceholder: "开始日期",endPlaceholder: "结束日期",},
});
const searchValue = reactive({userId: "",username: "",name: "",
});
const handleQuery = () => {formRef.value.validate((valid: boolean) => {if (valid) {console.log("查询", searchValue);// 查询逻辑}});
};const handleReset = () => {formRef.value.resetFields();
};const tableData = ref([{date: "2016-05-03",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-02",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-04",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-01",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},
]);const tableColumn = reactive([{prop: "date",label: "日期",width: "180",align: "center",},{prop: "name",label: "姓名",width: "180",align: "center",},{prop: "address",label: "地址",width: "280",align: "left",},{prop: "userid",label: "用户ID",width: "180",align: "center",},{prop: "username",label: "用户名",width: "180",align: "center",},{prop: "password",label: "密码",width: "180",align: "center",},{prop: "role",label: "角色",width: "180",align: "center",},{prop: "status",label: "状态",width: "180",align: "center",},{prop: "createTime",label: "创建时间",width: "180",align: "center",},{prop: "updateTime",label: "更新时间",width: "180",align: "center",},{prop: "remark",label: "备注",width: "180",align: "center",},{prop: "operation",label: "操作",width: "280",align: "center",fixed: "right",operate: [{label: "编辑",icon: "Edit",type: "primary",click: (row: any) => {ElMessage.success("点击了编辑" + row.name);},},{label: "删除",icon: "Delete",type: "danger",click: (row: any) => {ElMessage.error("点击了删除" + row.name);},},],},
]);const handleSelectChange = (selection: any) => {ElMessage.success("选择了" + selection[0].name);console.log(selection);
};const handleRowClick = (row, column, event) => {ElMessage.success("点击了" + row.name);console.log(row);console.log(column);console.log(event);
};const total = ref(100);
const queryParams = ref({currentPage: 2,currentSize: 30,
});
const handleGetTableData = () => {ElMessage.success(`当前页：${queryParams.value.currentPage}，每页条数：${queryParams.value.currentSize}`);console.log(queryParams.value);
};
</script>
<style lang="scss" scoped>
.outer-box {display: flex;flex-direction: column;height: 100%;width: 100%;
}
.form-box {height: 60px;display: flex;align-items: center;
}
.table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}
.page-box {height: 60px;display: flex;justify-content: flex-end;align-items: center;margin-top: 20px;
}
</style>