iter: d16 dataTable 落地列宽 width
This commit is contained in:
@@ -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' },
|
||||
|
||||
@@ -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 页;无匹配时显示空状态行",
|
||||
|
||||
Reference in New Issue
Block a user