iter(g259): 数据表格暴露每页条数候选

This commit is contained in:
HIsheR
2026-10-26 22:21:54 +08:00
parent ee39b6088a
commit 11a22f93c1
5 changed files with 17 additions and 3 deletions
+7 -1
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T14:20:50.687Z",
"generatedAt": "2026-10-26T14:21:24.531Z",
"repoRoot": ".",
"packages": [
{
@@ -2043,6 +2043,12 @@
"d": "每页行数;缺省 5",
"df": "5"
},
{
"n": "pageSizes",
"t": "number[]",
"d": "分页条「每页条数」候选档;缺省 [5, 10, 20],当前 pageSize 不在候选里会自动补进去",
"df": "[5, 10, 20]"
},
{
"n": "selectable",
"t": "boolean",
+2 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T14:20:50.687Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T14:21:24.531Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1013,6 +1013,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label:
- columns(必填):ColumnDef<T>[] —— 列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? };width 数字为固定像素,'flex' 自适应
- filterKey:string —— 工具栏筛选的列;缺省取第一列
- pageSize(默认 5):number —— 每页行数;缺省 5
- pageSizes(默认 [5, 10, 20]):number[] —— 分页条「每页条数」候选档;缺省 [5, 10, 20],当前 pageSize 不在候选里会自动补进去
- selectable(默认 false):boolean —— 启用行选择列:全选三态(含半选)、行 checkbox、已选计数;缺省 false
- page:Signal<number> —— 受控页码信号:与内核分页双向同步,传同一个信号给独立 pagination 组件即可联动
- loading:boolean | Signal<boolean> —— 加载态:为真时数据行换成骨架行(行数随 pageSize),筛选输入与翻页按钮临时禁用,容器带 aria-busy
+1 -1
View File
@@ -47,7 +47,6 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
const selectedCount = computed(() => state().selection.length);
// 加载态读取器:布尔直接读,信号则保持响应性(供 renderList 依赖收集)
const busy = (): boolean => (typeof props.loading === 'function' ? props.loading() : props.loading === true);
// —— 受控页码桥接:外部信号 ↔ 内核分页;外部越界先钳制,signal 等值写回不触发,双向同步收敛安全 ——
if (props.page) {
const pageSig = props.page;
@@ -192,6 +191,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
info,
total: () => visible().total,
loading: busy,
pageSizes: props.pageSizes,
onPage: (page) => table.dispatch({ type: 'setPage', page }),
onPageSize: (pageSize) => table.dispatch({ type: 'setPageSize', pageSize }),
}),
+1
View File
@@ -65,6 +65,7 @@ export interface DataTableProps<T> {
columns: TableColumn<T>[]; // 列定义:内核字段 + align / format
filterKey?: string; // 工具栏筛选的列;缺省取第一列
pageSize?: number; // 每页行数;缺省 5
pageSizes?: number[]; // 分页条「每页条数」候选;缺省 [5, 10, 20],当前 pageSize 不在候选里会自动补进去
selectable?: boolean; // 是否启用行选择列(含全选三态与已选计数);缺省 false
page?: Signal<number>; // 受控页码信号:与内核分页双向同步,可接独立 pagination 组件联动
loading?: boolean | Signal<boolean>; // 加载态:为真时数据行换成骨架行,筛选与翻页禁用
+6
View File
@@ -1914,6 +1914,12 @@
"d": "每页行数;缺省 5",
"df": "5"
},
{
"n": "pageSizes",
"t": "number[]",
"d": "分页条「每页条数」候选档;缺省 [5, 10, 20],当前 pageSize 不在候选里会自动补进去",
"df": "[5, 10, 20]"
},
{
"n": "selectable",
"t": "boolean",