refactor(system): 实现表格自适应高度布局，抽离通用滚动工具hooks
1. 新增useTableScroll组合式函数，动态计算表格滚动高度 2. 改造多个系统页面布局为弹性伸缩容器，解决页面滚动问题 3. 统一表格滚动配置，优化页面视觉体验
This commit is contained in:
andyesfly committed
1 parent
cbc0a936b7
commit
4048aeb6fb
7 files changed
+232
-2
No files matched your search
@@ -0,0 +1,51 @@
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
/**
|
||||
* 监听表格父容器高度，动态计算 a-table 的 scroll.y。
|
||||
* 自动测量 a-table 内部的分页器高度，从而得到准确的 tbody 高度。
|
||||
*/
|
||||
export function useTableScroll(minHeight = 120) {
|
||||
const wrapperRef = ref<HTMLElement | null>(null);
|
||||
const tableHeight = ref<number>(minHeight);
|
||||
let observer: ResizeObserver | null = null;
|
||||
|
||||
function update() {
|
||||
if (!wrapperRef.value) return;
|
||||
const wrapperHeight = wrapperRef.value.clientHeight;
|
||||
|
||||
// 动态获取分页器高度（如果存在）
|
||||
const paginationEl = wrapperRef.value.querySelector('.ant-table-pagination') as HTMLElement | null;
|
||||
const paginationHeight = paginationEl ? paginationEl.offsetHeight : 0;
|
||||
|
||||
// scroll.y = 容器总高 - 分页器高度（表头由 a-table 自动固定，无需扣除）
|
||||
const tbodyHeight = wrapperHeight - paginationHeight;
|
||||
tableHeight.value = Math.max(tbodyHeight, minHeight);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!wrapperRef.value) return;
|
||||
observer = new ResizeObserver(update);
|
||||
observer.observe(wrapperRef.value);
|
||||
|
||||
// 初始测量
|
||||
update();
|
||||
|
||||
// MutationObserver 用于监听分页器的动态添加/移除
|
||||
const mutationObserver = new MutationObserver(() => {
|
||||
update();
|
||||
});
|
||||
mutationObserver.observe(wrapperRef.value, { childList: true, subtree: true });
|
||||
// 保存以便卸载时使用
|
||||
(wrapperRef.value as any).__mutationObserver = mutationObserver;
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
observer?.disconnect();
|
||||
observer = null;
|
||||
if (wrapperRef.value && (wrapperRef.value as any).__mutationObserver) {
|
||||
(wrapperRef.value as any).__mutationObserver.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
return { wrapperRef, tableHeight };
|
||||
}
|
||||
@@ -409,13 +409,17 @@ function handleUserMenuClick({ key }: { key: string }) {
|
||||
|
||||
.content {
|
||||
margin: 0;
|
||||
min-height: calc(100vh - 64px);
|
||||
height: calc(100vh - 64px);
|
||||
overflow: hidden;
|
||||
|
||||
.view-wrapper {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
min-height: calc(100vh - 64px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,12 +63,14 @@
|
||||
</a-card>
|
||||
|
||||
<a-card :bordered="false" class="table-card">
|
||||
<div class="table-wrapper" ref="wrapperRef">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="logList"
|
||||
:loading="tableLoading"
|
||||
:pagination="paginationConfig"
|
||||
row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
@@ -82,6 +84,7 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -92,6 +95,9 @@ import { message } from 'ant-design-vue'
|
||||
import { SearchOutlined, ReloadOutlined, DownloadOutlined } from '@ant-design/icons-vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { logApi } from '@/api/log'
|
||||
import { useTableScroll } from '@/composables/useTableScroll'
|
||||
|
||||
const { wrapperRef, tableHeight } = useTableScroll()
|
||||
|
||||
const tableLoading = ref(false)
|
||||
const exportLoading = ref(false)
|
||||
@@ -271,9 +277,15 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="less">
|
||||
.operation-log {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search-card {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
@@ -282,8 +294,29 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.table-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -40,12 +40,14 @@
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper" ref="wrapperRef">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
@@ -80,6 +82,7 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
@@ -131,8 +134,11 @@ import {
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { dictApi } from '@/api/dict';
|
||||
import { useTableScroll } from '@/composables/useTableScroll';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { wrapperRef, tableHeight } = useTableScroll();
|
||||
|
||||
interface DictItem {
|
||||
id: number;
|
||||
dictType: string;
|
||||
@@ -346,18 +352,47 @@ async function handleDelete(record: DictItem) {
|
||||
|
||||
<style scoped>
|
||||
.dict-management {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
|
||||
@@ -8,12 +8,14 @@
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<div class="table-wrapper" ref="wrapperRef">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="menuList"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }"
|
||||
:expandable="{
|
||||
defaultExpandAllRows: false,
|
||||
showExpandColumn: true,
|
||||
@@ -54,6 +56,7 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
@@ -131,6 +134,9 @@ import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { menuApi } from '@/api/menu';
|
||||
import { useTableScroll } from '@/composables/useTableScroll';
|
||||
|
||||
const { wrapperRef, tableHeight } = useTableScroll({ paginationHeight: 0 });
|
||||
|
||||
interface MenuItem {
|
||||
id: number;
|
||||
@@ -329,12 +335,43 @@ async function handleDelete(record: MenuItem) {
|
||||
|
||||
<style scoped lang="less">
|
||||
.menu-management {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.ant-card) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row-expand-icon) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -21,12 +21,14 @@
|
||||
</a-input-search>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper" ref="wrapperRef">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="roleList"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
@@ -68,6 +70,7 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
@@ -144,8 +147,11 @@ import {
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { roleApi, type RoleInfo } from '@/api/role';
|
||||
import { useTableScroll } from '@/composables/useTableScroll';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { wrapperRef, tableHeight } = useTableScroll();
|
||||
|
||||
interface MenuTreeNode {
|
||||
id: number;
|
||||
menuName: string;
|
||||
@@ -400,17 +406,46 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.role-management {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper" ref="wrapperRef">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
@@ -45,6 +46,7 @@
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
@@ -89,6 +91,7 @@
|
||||
<a-empty description="暂无用户数据" />
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
@@ -165,8 +168,11 @@ import {
|
||||
EditOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { userApi, type UserInfo, type UserQuery, type RoleInfo } from '@/api/user';
|
||||
import { useTableScroll } from '@/composables/useTableScroll';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { wrapperRef, tableHeight } = useTableScroll();
|
||||
|
||||
const loading = ref(false);
|
||||
const dataSource = ref<UserInfo[]>([]);
|
||||
const total = ref(0);
|
||||
@@ -469,18 +475,47 @@ function formatDateTime(dateStr: string) {
|
||||
|
||||
<style scoped>
|
||||
.user-management {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
|
||||
Reference in new issue
Block a user