iter(g312): 表格空状态补操作插槽
This commit is contained in:
@@ -124,7 +124,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
|
||||
if (busy()) return skeletonRows(); // 加载态优先:不看数据,避免闪出旧行
|
||||
const sel = state().selection; // 读入依赖:选择变化即整表重绘(行数 = pageSize,代价可控)
|
||||
const rows = visible().rows;
|
||||
if (!rows.length) return [emptyRow(span(), keyword, () => table.dispatch({ type: 'setFilter', key: filterKey, value: '' }), props.emptyText)]; // 空状态:筛选词与内核筛选一起清
|
||||
if (!rows.length) return [emptyRow(span(), keyword, () => table.dispatch({ type: 'setFilter', key: filterKey, value: '' }), props.emptyText, props.emptyAction)]; // 空状态:筛选词与内核筛选一起清;真没数据时给调用方的操作插槽
|
||||
return rows.map((row, i) => {
|
||||
const key = visible().keys[i];
|
||||
const selected = sel.includes(key);
|
||||
|
||||
@@ -3,7 +3,8 @@ import type { Signal } from '@ui-arch/frame';
|
||||
import { button } from './button.js';
|
||||
|
||||
/*** 表格空状态行:有筛选词说明是筛掉的并给一键清除,没有筛选词就是真没数据;两种语义不该混成一句话 ***/
|
||||
export function emptyRow(colspan: number, keyword: Signal<string>, onClear: () => void, emptyText = '暂无数据'): HTMLElement {
|
||||
export function emptyRow(colspan: number, keyword: Signal<string>, onClear: () => void, emptyText = '暂无数据', action?: unknown): HTMLElement {
|
||||
// action 插槽只在「真没数据」时出现:筛选没结果时该引导清条件,不是引导新建
|
||||
const q = keyword().trim(); // 读信号:筛选词变化时整表重绘会带上新文案
|
||||
return h(
|
||||
'tr',
|
||||
@@ -12,7 +13,7 @@ export function emptyRow(colspan: number, keyword: Signal<string>, onClear: () =
|
||||
'td',
|
||||
{ colspan },
|
||||
h('span', { class: 'ua-empty-tip' }, q ? `没有符合「${q}」的行` : emptyText), // 无筛选词时用调用方文案,缺省「暂无数据」
|
||||
q ? button({ label: '清除筛选', variant: 'ghost', onClick: () => { keyword(''); onClear(); } }) : null, // 清空信号与内核筛选
|
||||
q ? button({ label: '清除筛选', variant: 'ghost', onClick: () => { keyword(''); onClear(); } }) : action ?? null, // 清筛选与「新建」互斥:同一时刻只给一个下一步
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -67,6 +67,7 @@ export interface DataTableProps<T> {
|
||||
pageSize?: number; // 每页行数;缺省 5
|
||||
pageSizes?: number[]; // 分页条「每页条数」候选;缺省 [5, 10, 20],当前 pageSize 不在候选里会自动补进去
|
||||
emptyText?: string; // 无数据时的空状态文案(有筛选词时仍显示「没有符合「x」的行」);缺省「暂无数据」
|
||||
emptyAction?: unknown; // 真没数据时占位区右侧的操作(如「新建」按钮);有筛选词时换成「清除筛选」,两者互斥
|
||||
selectable?: boolean; // 是否启用行选择列(含全选三态与已选计数);缺省 false
|
||||
page?: Signal<number>; // 受控页码信号:与内核分页双向同步,可接独立 pagination 组件联动
|
||||
loading?: boolean | Signal<boolean>; // 加载态:为真时数据行换成骨架行,筛选与翻页禁用
|
||||
|
||||
@@ -1954,6 +1954,11 @@
|
||||
"d": "无数据时的空状态文案;有筛选词时仍显示「没有符合「x」的行」并给一键清除(两种语义不混用)",
|
||||
"df": "暂无数据"
|
||||
},
|
||||
{
|
||||
"n": "emptyAction",
|
||||
"t": "unknown",
|
||||
"d": "真没数据时占位区右侧的操作(如「新建」按钮);有筛选词时这一位置换成「清除筛选」,两者互斥"
|
||||
},
|
||||
{
|
||||
"n": "selectable",
|
||||
"t": "boolean",
|
||||
@@ -2023,7 +2028,8 @@
|
||||
"需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出",
|
||||
"整行可点(进详情、选中一行做后续操作)传 onRowClick:行会变成可聚焦项,Enter / 空格与点击等价;不传时行不进 Tab 序列,纯展示表不会被读屏当成按钮",
|
||||
"需要让用户自己调列时开 columnToggle:工具栏多一个「列」按钮,弹层勾选即刻重绘表头与单元格(隐藏列不占 colspan,空状态与骨架行同步收窄)",
|
||||
"想记住用户偏好就传 hiddenColumns 信号:面板勾选实时写回,外部赋值即整表跟随;隐藏筛选列后筛选条件仍然生效,属预期而非失效"
|
||||
"想记住用户偏好就传 hiddenColumns 信号:面板勾选实时写回,外部赋值即整表跟随;隐藏筛选列后筛选条件仍然生效,属预期而非失效",
|
||||
"表里本来就空(不是筛掉的)时传 emptyAction 给个「新建」之类的出口:它只在「真没数据」时出现,一旦有筛选词就换成「清除筛选」——先让用户清条件,而不是急着让他新建"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user