iter(g330): 表格列支持自定义单元格渲染

This commit is contained in:
HIsheR
2026-10-27 02:03:09 +08:00
parent ffb4f6c4d5
commit 20290f67a4
7 changed files with 22 additions and 9 deletions
+4 -3
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T17:59:51.593Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T18:02:35.274Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1025,7 +1025,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label:
参数:
- data(必填):T[] | Signal<T[]> —— 全量行数据(行须含 id 作 rowKey);传信号或 computed 时数据变化自动换源,排序 / 筛选 / 页码保持用户原意
- columns(必填):ColumnDef<T>[] —— 列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? };width 数字为固定像素,'flex' 自适应
- columns(必填):ColumnDef<T>[] —— 列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format?, render? };width 数字为固定像素,'flex' 自适应
- filterKey:string —— 工具栏筛选的列;缺省取第一列
- pageSize(默认 5):number —— 每页行数;缺省 5
- pageSizes(默认 [5, 10, 20]):number[] —— 分页条「每页条数」候选档;缺省 [5, 10, 20],当前 pageSize 不在候选里会自动补进去
@@ -2587,7 +2587,8 @@ const title = signal('季度目标'); editable({ value: title, label: '标题',
2. 点文字进编辑态:Enter 提交、Esc 取消、点别处(失焦)提交;多行模式要 Ctrl / Cmd + Enter 才提交,Enter 留给换行——否则多行里连换行都写不了
3. validate 返回文案时保留编辑态并标红:控件带 aria-invalid、下方 role=alert 出文案,与 form 的出错口径一致,用户改对再提交即可
4. disabled 接受布尔或信号:禁用时静止态是灰字、点了不进编辑,适合权限只读的场景(要完全不给「可改」暗示就直接渲染文字)
5. 什么时候别用:长表单(用 form + textField,editable 没有 label 排版与必填标记)、需要撤销栈的富文本,以及值会被频繁外部改写的地方(编辑中不跟随外部更新,是有意的取舍)
5. 单元格里要塞组件(editable 就地编辑、tag 状态标记、avatar 头像、progress 完成度)时给列传 render: (row) => 节点:它直接取代 format 决定这一格画什么,排序与筛选仍按 dataKey 的原值走;格内的点击会被拦下,不会顺带触发 onRowClick(点单元格里的按钮不该等于点整行)
6. 什么时候别用:长表单(用 form + textField,editable 没有 label 排版与必填标记)、需要撤销栈的富文本,以及值会被频繁外部改写的地方(编辑中不跟随外部更新,是有意的取舍)
现场演示:apps/docs/demo.html#sec-editable