iter: d19 dataTable 选中态受控

This commit is contained in:
ui-arch-bot
2026-10-23 17:01:46 +08:00
parent 4012923ff1
commit 4555542811
8 changed files with 55 additions and 5 deletions
+14
View File
@@ -60,6 +60,20 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
});
}
// —— 受控选中桥接:外部信号 ↔ 内核选择集;比较内容而非引用,避免来回派发 ——
if (props.selected) {
const selSig = props.selected;
const sameKeys = (a: RowKey[], b: RowKey[]): boolean => a.length === b.length && a.every((k, i) => k === b[i]);
effect(() => {
const external = selSig();
if (!sameKeys(external, state().selection)) table.dispatch({ type: 'setSelection', keys: external }); // 外部改写 → 内核
});
effect(() => {
const internal = state().selection;
if (!sameKeys(internal, selSig())) selSig([...internal]); // 内部勾选 → 写回外部(拷贝避免外部改到内核数组)
});
}
const filterKey = props.filterKey ?? props.columns[0].key;
const colspan = props.columns.length + (selectable ? 1 : 0);
+1
View File
@@ -54,6 +54,7 @@ export interface DataTableProps<T> {
selectable?: boolean; // 是否启用行选择列(含全选三态与已选计数);缺省 false
page?: Signal<number>; // 受控页码信号:与内核分页双向同步,可接独立 pagination 组件联动
loading?: boolean | Signal<boolean>; // 加载态:为真时数据行换成骨架行,筛选与翻页禁用
selected?: Signal<RowKey[]>; // 受控选中行信号:与内核选择双向同步,供批量操作读取
}
/*** 选项条目:select / radioGroup / tabs 共用的选项形状 ***/
+7 -1
View File
@@ -1124,6 +1124,11 @@
"n": "loading",
"t": "boolean | Signal<boolean>",
"d": "加载态:为真时数据行换成骨架行(行数随 pageSize),筛选输入与翻页按钮临时禁用,容器带 aria-busy"
},
{
"n": "selected",
"t": "Signal<RowKey[]>",
"d": "受控选中行信号:与内核选择双向同步(内容比较,不来回派发),供批量操作读取/改写"
}
],
"example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })",
@@ -1137,7 +1142,8 @@
"工具栏输入框即筛选,输入即时过滤并回第 1 页;无匹配时显示空状态行",
"表头粘性固定(滚动容器 max-height 420px),斑马纹 + 悬停高亮由 CSS 提供",
"数据在途时传 loading(布尔或信号):表格体换成骨架行、筛选与翻页禁用,返回后置回 false 即恢复",
"需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用"
"需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用",
"需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存)"
]
}
]