iter: d19 dataTable 选中态受控

apps/demo/main.ts

@@ -30,6 +30,7 @@ import {
   toast,
   tooltip,
 } from '@ui-arch/ui';
+import type { RowKey } from '@ui-arch/ui';
 
 /*** 侧边目录：挂载后从 .sec 反推锚点，IntersectionObserver 高亮视口内区块（清单改动自动跟随） ***/
 function buildToc(toc: HTMLElement, content: HTMLElement): void {
@@ -109,6 +110,9 @@ const tags = signal(['设计', '前端', '组件库']);
 // —— 滑块：音量与禁用态演示 ——
 const volume = signal(40);
 
+// —— 受控选中：dataTable 内部勾选实时写回，外部可清空 ——
+const picked = signal<RowKey[]>([]);
+
 // —— 表格加载态：切换后数据行变骨架行，筛选与翻页临时禁用 ——
 const tableLoading = signal(false);
 
@@ -392,7 +396,15 @@ const content = h(
         { key: 'city', header: '城市', align: 'center', width: 'flex' },
       ],
       pageSize: 5,
-    }), h('div', { class: 'row' }, switchButton({ label: '加载态', checked: tableLoading }))),
+      selected: picked,
+    }), h(
+      'div',
+      { class: 'row' },
+      switchButton({ label: '加载态', checked: tableLoading }),
+      badge({ label: '受控选中', variant: 'default' }),
+      h('span', { class: 'out' }, () => `已选 ${picked().length} 行`),
+      button({ label: '清空选择', variant: 'ghost', onClick: () => picked([]) }),
+    )),
     card(
       { title: '独立分页器联动（pageSize 3，共用页码信号）' },
       dataTable({