iter(g330): 表格列支持自定义单元格渲染
This commit is contained in:
@@ -133,8 +133,8 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
|
||||
const open = !!props.renderDetail && expanded().includes(key); // 展开态按 rowKey 记:翻页或筛选后同一行仍保持着
|
||||
const cells = shown().map((col) => {
|
||||
const raw = table.getCellValue(row, col.key);
|
||||
const text = col.format ? col.format(raw, row) : String(raw); // format 只产出纯文本,天然免注入
|
||||
return h('td', col.align ? { class: `ua-align-${col.align}` } : null, text);
|
||||
const custom = col.render?.(row); // 自定义单元格:调用方直接给节点(editable / tag / avatar),排序与筛选仍走原值
|
||||
return h('td', { class: col.align ? `ua-align-${col.align}` : null, onclick: custom ? (e: MouseEvent) => e.stopPropagation() : null }, custom ?? (col.format ? col.format(raw, row) : String(raw))); // 无 render 退回纯文本(免注入);格内点击不触发整行回调
|
||||
});
|
||||
if (selectable) {
|
||||
const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement; // 受控:选中态由内核 selection 决定
|
||||
|
||||
@@ -57,6 +57,7 @@ export interface CardProps {
|
||||
export interface TableColumn<T = unknown> extends ColumnDef<T> {
|
||||
align?: 'left' | 'center' | 'right'; // 表头与单元格对齐;缺省 left
|
||||
format?: (value: unknown, row: T) => string; // 单元格文案格式化(返回纯文本,走 textContent 渲染)
|
||||
render?: (row: T) => unknown; // 自定义单元格内容(DOM / 字符串):传了则 format 不生效,排序筛选仍按原值,格内点击不再触发整行回调
|
||||
}
|
||||
|
||||
/*** 数据表格入参 ***/
|
||||
|
||||
@@ -1937,7 +1937,7 @@
|
||||
"n": "columns",
|
||||
"t": "ColumnDef<T>[]",
|
||||
"r": 1,
|
||||
"d": "列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? };width 数字为固定像素,'flex' 自适应"
|
||||
"d": "列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format?, render? };width 数字为固定像素,'flex' 自适应"
|
||||
},
|
||||
{
|
||||
"n": "filterKey",
|
||||
@@ -4658,6 +4658,7 @@
|
||||
"点文字进编辑态:Enter 提交、Esc 取消、点别处(失焦)提交;多行模式要 Ctrl / Cmd + Enter 才提交,Enter 留给换行——否则多行里连换行都写不了",
|
||||
"validate 返回文案时保留编辑态并标红:控件带 aria-invalid、下方 role=alert 出文案,与 form 的出错口径一致,用户改对再提交即可",
|
||||
"disabled 接受布尔或信号:禁用时静止态是灰字、点了不进编辑,适合权限只读的场景(要完全不给「可改」暗示就直接渲染文字)",
|
||||
"单元格里要塞组件(editable 就地编辑、tag 状态标记、avatar 头像、progress 完成度)时给列传 render: (row) => 节点:它直接取代 format 决定这一格画什么,排序与筛选仍按 dataKey 的原值走;格内的点击会被拦下,不会顺带触发 onRowClick(点单元格里的按钮不该等于点整行)",
|
||||
"什么时候别用:长表单(用 form + textField,editable 没有 label 排版与必填标记)、需要撤销栈的富文本,以及值会被频繁外部改写的地方(编辑中不跟随外部更新,是有意的取舍)"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user