iter(g94): 补充数据表联动导出配方
This commit is contained in:
@@ -1108,6 +1108,14 @@
|
|||||||
"acceptance": "TreeProps 新增 searchable:顶部搜索框按标签包含匹配(大小写不敏感),命中节点连同父链保留、命中枝临时强制展开,不命中整枝隐藏且不参与 ↑↓ 遍历(visibleRows 改判 [hidden]);搜索框放在 role=tree 之外避免语义混淆;文档与演示同步;tree ≤ 200 行;npm run check 全绿",
|
"acceptance": "TreeProps 新增 searchable:顶部搜索框按标签包含匹配(大小写不敏感),命中节点连同父链保留、命中枝临时强制展开,不命中整枝隐藏且不参与 ↑↓ 遍历(visibleRows 改判 [hidden]);搜索框放在 role=tree 之外避免语义混淆;文档与演示同步;tree ≤ 200 行;npm run check 全绿",
|
||||||
"notes": "自补:可用性;搜索只改视图显隐,不回写 expanded 信号,退出搜索即恢复用户原有展开态",
|
"notes": "自补:可用性;搜索只改视图显隐,不回写 expanded 信号,退出搜索即恢复用户原有展开态",
|
||||||
"status": "done"
|
"status": "done"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "g94",
|
||||||
|
"title": "补充数据表联动导出配方",
|
||||||
|
"motivation": "本轮新增的受控 page 联动、列宽拖拽、CSV 导出三个能力只有单组件参数表,没有「怎么拼在一起」的指导;配方文件停在第 4 条,Agent 与新人拼表格联动时仍要自己试",
|
||||||
|
"acceptance": "recipes.md 新增「配方 5:数据表 + 独立分页器 + 导出」,覆盖同一 page 信号双绑、exportable 导全量行与当页的区别、拖拽只对数字列宽生效、rowKey 记账;npm run docs 后 llms-full.txt 出现该配方;npm run check 全绿",
|
||||||
|
"notes": "自补:文档完善;只写用法不碰实现,配方随 docs 注入 llms-full",
|
||||||
|
"status": "open"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1833,6 +1833,30 @@ list({ items: items(), bordered: true, emptyText: loading() ? '加载中…' : '
|
|||||||
- 空态文案随加载态切换;列表本身会在 `items` 为空时渲染 `empty`,不需要业务层再判断一次。
|
- 空态文案随加载态切换;列表本身会在 `items` 为空时渲染 `empty`,不需要业务层再判断一次。
|
||||||
- 需要骨架屏就换成 `skeleton`,加载完成再 `renderList` 成真实行。
|
- 需要骨架屏就换成 `skeleton`,加载完成再 `renderList` 成真实行。
|
||||||
|
|
||||||
|
## 配方 5:数据表 + 独立分页器 + 导出
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const page = signal(1);
|
||||||
|
const table = dataTable({
|
||||||
|
data: rows,
|
||||||
|
columns: [
|
||||||
|
{ key: 'name', header: '姓名', sortable: true, width: 160 },
|
||||||
|
{ key: 'city', header: '城市', align: 'center', width: 'flex' },
|
||||||
|
],
|
||||||
|
page, // 受控页码:与外部 pagination 双向联动
|
||||||
|
selectable: true,
|
||||||
|
exportable: true, // 导出筛选 + 排序后的全量行(不是当前页)
|
||||||
|
exportName: '用户列表.csv',
|
||||||
|
});
|
||||||
|
const pager = pagination({ page, pageSize: 5, total: rows.length, jumpable: true, pageSizes: [5, 10, 20] });
|
||||||
|
```
|
||||||
|
|
||||||
|
要点:
|
||||||
|
- 页码只保留一个来源:`dataTable` 与 `pagination` 共传同一个 `page` 信号,翻页由内核写回,桥接层会钳制越界值。
|
||||||
|
- `exportable` 导出的是「筛选 + 排序后、未分页」的全量行,列序与表头一致、单元格走 `format`;想导出当前页请自行读 `getVisibleRows()`。
|
||||||
|
- 列宽拖拽只对 `width` 给数字的列生效(`'flex'` 列交给浏览器自适应);双击手柄回到声明宽度。
|
||||||
|
- 行选择一律按 rowKey 记账,筛选换掉可见行后已选仍在,批量操作前用已选计数确认。
|
||||||
|
|
||||||
## 通用约定
|
## 通用约定
|
||||||
|
|
||||||
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。
|
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。
|
||||||
|
|||||||
@@ -73,6 +73,30 @@ list({ items: items(), bordered: true, emptyText: loading() ? '加载中…' : '
|
|||||||
- 空态文案随加载态切换;列表本身会在 `items` 为空时渲染 `empty`,不需要业务层再判断一次。
|
- 空态文案随加载态切换;列表本身会在 `items` 为空时渲染 `empty`,不需要业务层再判断一次。
|
||||||
- 需要骨架屏就换成 `skeleton`,加载完成再 `renderList` 成真实行。
|
- 需要骨架屏就换成 `skeleton`,加载完成再 `renderList` 成真实行。
|
||||||
|
|
||||||
|
## 配方 5:数据表 + 独立分页器 + 导出
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const page = signal(1);
|
||||||
|
const table = dataTable({
|
||||||
|
data: rows,
|
||||||
|
columns: [
|
||||||
|
{ key: 'name', header: '姓名', sortable: true, width: 160 },
|
||||||
|
{ key: 'city', header: '城市', align: 'center', width: 'flex' },
|
||||||
|
],
|
||||||
|
page, // 受控页码:与外部 pagination 双向联动
|
||||||
|
selectable: true,
|
||||||
|
exportable: true, // 导出筛选 + 排序后的全量行(不是当前页)
|
||||||
|
exportName: '用户列表.csv',
|
||||||
|
});
|
||||||
|
const pager = pagination({ page, pageSize: 5, total: rows.length, jumpable: true, pageSizes: [5, 10, 20] });
|
||||||
|
```
|
||||||
|
|
||||||
|
要点:
|
||||||
|
- 页码只保留一个来源:`dataTable` 与 `pagination` 共传同一个 `page` 信号,翻页由内核写回,桥接层会钳制越界值。
|
||||||
|
- `exportable` 导出的是「筛选 + 排序后、未分页」的全量行,列序与表头一致、单元格走 `format`;想导出当前页请自行读 `getVisibleRows()`。
|
||||||
|
- 列宽拖拽只对 `width` 给数字的列生效(`'flex'` 列交给浏览器自适应);双击手柄回到声明宽度。
|
||||||
|
- 行选择一律按 rowKey 记账,筛选换掉可见行后已选仍在,批量操作前用已选计数确认。
|
||||||
|
|
||||||
## 通用约定
|
## 通用约定
|
||||||
|
|
||||||
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。
|
- 状态一律放信号(`signal` / `computed`),组件只读写信号,不持有业务数据副本。
|
||||||
|
|||||||
Reference in New Issue
Block a user