iter(g140): 表格支持整行点击

This commit is contained in:
HIsheR
2026-10-26 15:35:03 +08:00
parent 2a7fdcd9d7
commit e40cd2c1fd
8 changed files with 47 additions and 7 deletions
+5 -3
View File
@@ -151,15 +151,17 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
return h('td', col.align ? { class: `ua-align-${col.align}` } : null, text);
});
if (selectable) {
const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement;
const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement; // 受控:选中态由内核 selection 决定
check.checked = selected;
check.addEventListener('change', () => table.dispatch({ type: 'toggleSelect', key }));
cells.unshift(h('td', { class: 'ua-cell-check' }, check));
}
return h('tr', selected ? { class: 'ua-row-selected' } : null, ...cells);
const rowProps = props.onRowClick // 传了才把整行做成可聚焦按钮语义(Tab 进入、Enter / 空格触发)
? { tabindex: '0', class: `ua-row-clickable${selected ? ' ua-row-selected' : ''}`, onclick: () => props.onRowClick?.(row), onkeydown: (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); props.onRowClick?.(row); } } }
: selected ? { class: 'ua-row-selected' } : null;
return h('tr', rowProps, ...cells);
});
});
// —— 列宽:数字落成 <col> 固定宽度,'flex' 或未设置交给浏览器自适应 ——
const cols = props.columns.map((col) => (typeof col.width === 'number' ? h('col', { style: `width:${col.width}px` }) : h('col'))); // 每个数据列一个 <col>,拖拽直接改它
const colgroup = h('colgroup', null, selectable ? h('col', { style: 'width:44px' }) : null, ...cols);
+1
View File
@@ -67,6 +67,7 @@ export interface DataTableProps<T> {
selected?: Signal<RowKey[]>; // 受控选中行信号:与内核选择双向同步,供批量操作读取
exportable?: boolean; // 工具栏显示导出按钮:导出筛选 + 排序后的全量行(不分页);缺省 false
exportName?: string; // 导出文件名;缺省 table.csv
onRowClick?: (row: T) => void; // 整行点击 / Enter / 空格的回调;传了行才可聚焦(未传时行不可交互)
}
/*** 选项条目:select / radioGroup / tabs / segmented 共用的选项形状 ***/
+8 -1
View File
@@ -1793,6 +1793,12 @@
"n": "exportName",
"t": "string",
"d": "导出文件名;缺省 table.csv"
},
{
"n": "onRowClick",
"t": "(row: T) => void",
"k": 1,
"d": "整行点击 / Enter / 空格的回调;传了行才可聚焦可点(未传时行保持纯展示,不抢 Tab 焦点)"
}
],
"example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })",
@@ -1809,7 +1815,8 @@
"需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用",
"需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存)",
"可排序表头的 aria-sort 跟随排序态同步(ascending / descending / none),读屏能直接播报当前列序,箭头只是视觉补充",
"需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出"
"需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出",
"整行可点(进详情、选中一行做后续操作)传 onRowClick:行会变成可聚焦项,Enter / 空格与点击等价;不传时行不进 Tab 序列,纯展示表不会被读屏当成按钮"
]
},
{
+12
View File
@@ -4387,3 +4387,15 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
.ua-datepicker-day.is-in-range:hover {
background: color-mix(in srgb, var(--ua-color-accent) 20%, transparent);
}
/* —— 可点击行:指针手型 + 键盘聚焦环,与选中行底色叠加不冲突 —— */
.ua-row-clickable {
cursor: pointer;
}
.ua-row-clickable:hover td {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
}
.ua-row-clickable:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline-offset: -2px; /* 环画在行内,避免被表格滚动容器裁掉 */
}