fix(web): use page scrolling for all tables
This commit is contained in:
+2
-24
@@ -1,31 +1,9 @@
|
||||
// 列表页表格的统一形态:固定表头(表内滚动)+ 固定首列/操作列 + 横向滚动 + 分页。
|
||||
// 仅用 antd/rc-table 原生能力,不自定义滚动组件:
|
||||
// - scroll.y(表内滚动,固定表头)+ sticky(页面余量滚动时表头吸顶兜底);
|
||||
// antd 源码在 fixHeader 时固定 overflowY: 'scroll'(滚动条常驻,官方未提供按需开关),
|
||||
// 因此仅在「数据行超过一屏」时才开启 scroll.y,用 overflowGrid 判断:
|
||||
// 纵向 ≤ md(阈值 768,Grid.useBreakpoint 官方响应式 hook)→ 小屏数据必超一屏 → scroll.y + 首列固定;
|
||||
// 横向 ≥ xl(阈值 1280,布局含侧栏后仍够宽)→ 无挤压,不加 scroll.x/fixed 列/scroll.y;
|
||||
// 其余中等宽度 → scroll.x + fixed 首列/操作列,不设 scroll.y(无固定表头时滚动条自然按需出现)。
|
||||
// - scroll.x + 固定首列(fixed: 'left')与操作列(fixed: 'right')防挤压折叠。
|
||||
// - pageSize 20 + hideOnSinglePage:数据多时翻页,单页时隐藏分页条保持原视觉。
|
||||
import { Grid } from 'antd';
|
||||
// 列表表格使用页面纵向滚动与 sticky 表头吸顶,不设置表内纵向滚动。
|
||||
// 保留横向滚动、固定首列/操作列与分页(每页 20 条,单页隐藏分页条)。
|
||||
import type { ColumnsType, ColumnType } from 'antd/es/table';
|
||||
|
||||
export const TABLE_PAGE_SIZE = 20;
|
||||
|
||||
// antd Table 内容超出视口高度时,浏览器才需要纵向滚动;
|
||||
// 这里用「数据行数 × 行高」与视口比较,决定是否需要表内滚动(固定表头)。
|
||||
export function useOverflowGrid(rowCount: number) {
|
||||
const screens = Grid.useBreakpoint();
|
||||
const vertical = rowCount * 48 + 120 >= window.innerHeight - 300 || !screens.md;
|
||||
const horizontal = !screens.xl;
|
||||
return { vertical, horizontal };
|
||||
}
|
||||
|
||||
export function tableScroll(x: number | undefined, y: string | undefined) {
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
export function tablePagination() {
|
||||
return { pageSize: TABLE_PAGE_SIZE, hideOnSinglePage: true };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user