iter: d16 dataTable 落地列宽 width

This commit is contained in:
ui-arch-bot
2026-10-23 16:58:52 +08:00
parent 1c03c8113a
commit fa168b9a1c
7 changed files with 35 additions and 15 deletions
+9 -1
View File
@@ -132,6 +132,14 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
});
});
// —— 列宽:数字落成 <col> 固定宽度,'flex' 或未设置交给浏览器自适应 ——
const colgroup = h(
'colgroup',
null,
selectable ? h('col', { style: 'width:44px' }) : null,
...props.columns.map((col) => (typeof col.width === 'number' ? h('col', { style: `width:${col.width}px` }) : h('col'))),
);
const filterInput = textField({
placeholder: `筛选 ${filterKey}…`,
disabled: props.loading, // 加载中禁止筛选,避免与在途结果竞争
@@ -150,7 +158,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
filterInput,
selectable ? h('span', { class: 'ua-sel-count' }, () => (selectedCount() ? `已选 ${selectedCount()} 行` : '')) : null,
),
h('div', { class: 'ua-table-scroll' }, h('table', null, h('thead', null, h('tr', null, selectable ? headCheck : null, ...props.columns.map(th))), tbody)),
h('div', { class: 'ua-table-scroll' }, h('table', null, colgroup, h('thead', null, h('tr', null, selectable ? headCheck : null, ...props.columns.map(th))), tbody)),
h(
'div',
{ class: 'ua-pager' },
+2 -1
View File
@@ -1094,7 +1094,7 @@
"n": "columns",
"t": "ColumnDef<T>[]",
"r": 1,
"d": "列定义:内核字段 { key, header?, sortable? } + 皮肤字段 { align?: left|center|right, format?: (value, row) => string }"
"d": "列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? };width 数字为固定像素,'flex' 自适应"
},
{
"n": "filterKey",
@@ -1129,6 +1129,7 @@
"准备行数据,确保每行有唯一 id(跨页选择与刷新不丢行靠它)",
"定义 columns:sortable: true 的列表头可点击排序(升 → 降 → 取消循环),标记箭头 ↑↓↕",
"列展示细节用皮肤字段:align 控制表头与单元格对齐,format(value, row) 返回纯文本(走 textContent,不需要转义)",
"列宽用内核字段 width:数字(像素)固定该列,'flex' 或不设则按内容自适应",
"selectable: true 开启行选择:表头全选框带 indeterminate 半选态,工具栏显示已选计数",
"选中行用低视觉比重样式(淡色底 + 弱化文字),选择状态存 rowKey,跨页不丢失",
"工具栏输入框即筛选,输入即时过滤并回第 1 页;无匹配时显示空状态行",