iter: d04 dataTable 接加载态(骨架行 + 交互禁用)

This commit is contained in:
ui-arch-bot
2026-10-23 16:48:36 +08:00
parent df2fb34e63
commit ccbdcb9271
9 changed files with 51 additions and 11 deletions
+5 -3
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-23T08:47:49.411Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-23T08:48:29.721Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -544,6 +544,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label:
- pageSize(默认 5):number —— 每页行数;缺省 5
- selectable(默认 false):boolean —— 启用行选择列:全选三态(含半选)、行 checkbox、已选计数;缺省 false
- page:Signal<number> —— 受控页码信号:与内核分页双向同步,传同一个信号给独立 pagination 组件即可联动
- loading:boolean | Signal<boolean> —— 加载态:为真时数据行换成骨架行(行数随 pageSize),筛选输入与翻页按钮临时禁用,容器带 aria-busy
示例:
@@ -559,7 +560,8 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓
4. 选中行用低视觉比重样式(淡色底 + 弱化文字),选择状态存 rowKey,跨页不丢失
5. 工具栏输入框即筛选,输入即时过滤并回第 1 页;无匹配时显示空状态行
6. 表头粘性固定(滚动容器 max-height 420px),斑马纹 + 悬停高亮由 CSS 提供
7. 需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用
7. 数据在途时传 loading(布尔或信号):表格体换成骨架行、筛选与翻页禁用,返回后置回 false 即恢复
8. 需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用
现场演示:apps/docs/demo.html#sec-table
@@ -587,7 +589,7 @@ API 速览:
- modal(props, ...children):弹窗,open 信号驱动显隐,Esc / 遮罩 / × 关闭
- form(props, items):表单容器,布局 + 聚合校验,全部通过才触发 onSubmit
- formItem(props, control):表单字段,label + 必填红星 + 规则校验 + 错误区,返回 { el, validate } 句柄
- dataTable(props):数据表格,粘性表头 / 行选择(全选三态)/ 排序 / 筛选 / 分页 / 空状态,内核为 table-core
- dataTable(props):数据表格,粘性表头 / 行选择(全选三态)/ 排序 / 筛选 / 分页 / 空状态;loading 为真时数据行换骨架行且筛选/翻页禁用,内核为 table-core
一行用法: