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
+2 -2
View File
@@ -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 决定
+1
View File
@@ -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 不生效,排序筛选仍按原值,格内点击不再触发整行回调
}
/*** 数据表格入参 ***/