Web 管理端 · 列表 Excel 行列复制

日期：2026-10-19
状态：已确认
范围：web-admin 使用 ListTable + ListToolbarEndActions 的业务列表
交互示意：docs/fresh-mint-list-excel-select-demo.html

1. 目标与边界

1.1 目标

用户在现有列表上点一次图标，进入 Excel 复制模式：在表头点选多列，在序号列点选多行，用 Ctrl/Cmd + C 复制当前页可见文字。粘贴到 Excel 时按行列落入单元格。

1.2 一次铺开

能力做在两个公共组件上，业务页面不逐页改列、不逐页加按钮。

组件	职责
`web-admin/src/components/business/list-toolbar-end-actions/index.vue`	在刷新图标左侧放 Excel 图标，点击切换模式
`web-admin/src/components/business/list-table/index.vue`	选列、选行、高亮、读取可见文字、写入剪贴板

图标与表格是同一面板里的兄弟节点。图标点击后，切换自身所在 .panel 内、DOM 顺序中第一张允许 Excel 复制的 ListTable。页面不写接线代码。

1.3 不做

不在格子上拖动框选。
不把列表换成电子表格，不支持改格子、公式、填充。
不复制未加载的下一页。整表导出仍走现有导出按钮。
不自动新增序号列。没有 type="index" / ListIndexColumn 的表，只能选列。
第一版不特殊处理合并单元格。合并格按每个可见格子的文字复制，同一文字可能重复出现。
不改小程序端。
仍直接使用 el-table、没有 ListToolbarEndActions 的页面不出现该图标。

2. 入口

位置：ListToolbarEndActions 内，刷新按钮的左侧，列设置的更左侧。顺序为：

Excel 图标 → 刷新 → 列设置

样式与刷新按钮相同：36×36、无边框、图标 16px、默认 --mint-text-muted。悬停和打开时：字色 --mint-primary-dark，背景 --mint-primary-bg。

图标是表格线框（四边加横竖分隔），不是彩色 Excel 商标。aria-label 与 tooltip：

关闭时：「Excel 复制」
打开时：「退出 Excel 复制」

点一下打开，再点一下关闭。模式只存在于当前这张表，不写入本地存储。关闭、翻页、刷新数据、列显隐变化时清空已选行列。

ListToolbarEndActions 增加 showExcelCopy，默认 true。ListTable 增加 excelCopy，默认 true。任一为 false 时，该表不进入 Excel 模式，图标不渲染。

3. 两种模式

3.1 列表模式（默认）

与现在一致：点名称打开查看，勾选框用于批量操作，编辑等操作按钮可用，表头筛选可用。

3.2 Excel 模式

点数据列表头：选中整列；再点同一表头取消。连续点多个表头即多列。
按住 Shift 再点表头：选中上次点的列到这一列之间的所有数据列（按表格从左到右的顺序）。
点序号列单元格：选中该行；再点取消。Shift 连选一段行。序号列表头不参与选择。
数据格、勾选框、操作按钮在此模式下不触发原来的点击。表头筛选不打开。
Escape 清空行列选择，仍停留在 Excel 模式。
再次点击工具栏 Excel 图标：退出模式并清空选择。

选中列的表头、选中行的序号格使用浅绿底。将要复制的格子使用浅绿填充。

4. 复制内容

触发：Excel 模式且已有选区时，Ctrl/Cmd + C。没有选区时不拦截快捷键。工具栏不增加「复制选区」「清空行列」文字按钮。

选中	复制范围
只选列	这些列 × 当前页全部数据行
只选行	这些行 × 当前可见的全部数据列
列和行都选	交叉区域
都没选	不复制

规则：

只复制当前页、当前可见列。列顺序与表格从左到右一致，行顺序与表格从上到下一致，与点击顺序无关。
第一行是表头，使用列配置上的 label，不用表头筛选控件的额外文字。
单元格使用该格的可见文字（链接文字、Tag 文案）。去掉首尾空白。格子内部的换行、回车、制表符替换成空格。
列与列之间是制表符 \t，行与行之间是 \r\n。剪贴板类型为 text/plain。浏览器拒绝写剪贴板时提示用户手动复制，不静默失败。
成功后提示「已复制，到 Excel 中直接粘贴」。

不进入复制结果的列：

type="selection" 勾选列
type="index" 序号列
type="expand" 展开列
label 为「操作」，或 class-name 含 col-actions 的列

固定列在 Element Plus 里会重复渲染。读文字和高亮时以主表体为准，避免同一格复制两次。固定列区域里的对应格子同步高亮。

5. 实现边界

ListToolbarEndActions
  Excel 图标点击
        │  同一 .panel 内第一张 data-list-excel-copy="on" 的表
        ▼
ListTable
  记录选中列 id、选中行下标
  高亮
  Ctrl/Cmd + C → 主表体可见文字 → text/plain

同一 .panel 里有多张 ListTable 时，图标只控制 DOM 顺序中的第一张允许 Excel 复制的表。目前业务页一个面板一张主表，满足这个约定。

读值走 DOM 可见文字，不要求各页提交字段映射。因此标签、链接、金额格式与用户所见一致。

6. 验收

客户列表等使用 ListToolbarEndActions 的页面，刷新图标左侧出现 Excel 图标。未使用该工具栏的页面没有这个图标。
未点击图标时，点名称、勾选、表头筛选、编辑与改动前一致。
打开后：点两列表头再点两行序号，Ctrl/Cmd + C，粘贴到 Excel 得到 2 列 × 2 行数据，且第一行是这两列的表头。
Shift 点表头得到连续列；再点已选表头可以取消该列。
复制结果不含勾选列、序号列、操作列。状态列是「合作中」这类可见文案。
退出图标、翻页或 Escape 后，选区高亮消失。退出后列表点击恢复。
showExcelCopy=false 或 excelCopy=false 的表不出现该能力。

2026-10-19-web-list-excel-copy-design.md 6.0 KB Постоянная ссылка История Исходник