fix(web): unify list tables with fixed header, fixed actions and pagination
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
// 列表页表格的统一形态:固定表头(表内滚动)+ 横向滚动防挤压 + 分页。
|
||||
// - scroll.y 用 calc(100vh - offset) 让表格高度贴合一屏,表头表尾常驻,数据在表内滚动;
|
||||
// offset 是页头(菜单行+PageContainer 标题/页头槽+卡片边框)与表格头行之外的高度估算值,
|
||||
// 估不准只会留下少量页面滚动,配合 sticky 兜底表头仍可见。
|
||||
// - sticky:当 offset 估算偏差或行高变化导致页面仍有滚动时,表头吸顶兜底。
|
||||
// - scroll.x + 操作列 fixed: 'right':窗口窄时横向滚动,列内容不再被压缩折叠。
|
||||
// - pageSize 20 + hideOnSinglePage:数据多时翻页,单页时隐藏分页条保持原视觉。
|
||||
import type { ColumnsType, ColumnType } from 'antd/es/table';
|
||||
|
||||
export const TABLE_PAGE_SIZE = 20;
|
||||
|
||||
export function tableScroll(x: number, offset = 300) {
|
||||
return { x, y: `calc(100vh - ${offset}px)` };
|
||||
}
|
||||
|
||||
export function tablePagination() {
|
||||
return { pageSize: TABLE_PAGE_SIZE, hideOnSinglePage: true };
|
||||
}
|
||||
|
||||
export function fixedRight<RecordType>(column: ColumnType<RecordType>): ColumnType<RecordType> {
|
||||
return { ...column, fixed: 'right' as const };
|
||||
}
|
||||
|
||||
export type { ColumnsType };
|
||||
Reference in New Issue
Block a user