---
id: "export"
title: "导出与列设置同步"
category: "列表工具"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-export"
source_data: "../component-data.json"
official_components: []
template_components: ["el-button"]
scenario_count: 6
verification: "scenario-checklist-not-full-test-pass"
---

# 导出与列设置同步

专题 `export` · 列表工具 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。

本页模板直接使用的 Element UI 标签：`el-button`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：默认从普通“导出”入口打开字段确认面板，初始勾选使用产品配置；本页只确认字段选择。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 勾选来源 | 初始配置和“同步列设置”决定当前勾选集合。 | 首次打开使用产品默认；用户点击同步时才按当前可见列更新，不改变导出字段顺序。 |
| 功能范围 | 字段选择、全选、同步、确认和取消属于当前面板功能。 | 固定列仍可取消导出；操作列不作为数据列，合并字段的实际输出在真实导出接入时明确。 |
| 自动可用状态 | 确认能否执行取决于勾选内容或权限条件。 | 当前空选时确认不可用；无权限等限制只在实际存在时使用禁用说明。 |
| 任务反馈 | 生成中、完成、失败属于真实导出任务的阶段。 | 接入真实文件生成后按任务结果显示反馈；本页没有这些实际任务，不能通过选颜色假装下载成功。 |

使用边界：不要把初始勾选、同步列设置、生成中与失败当成几种可选样式；文件生成与下载必须有真实结果。

## 组件规则

- **EXPORT-R01**：入口名“导出”，确认弹窗名“导出项确认”；顶部“全选 / 同步列设置”，底部“取消 / 确认”。
- **EXPORT-R02**：初始勾选由产品配置提供；固定列对应数据也允许取消。同步只按当前可见列更新勾选，不继承禁用状态，不改变字段顺序。
- **EXPORT-R03**：操作入口不作为数据导出。合并列实际导出展开为真实子字段；这里只展示字段选择组件，不模拟真实文件生成成功。
- **EXPORT-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **EXPORT-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **EXPORT-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **EXPORT-R07**：【导出入口】默认导出入口按普通按钮或操作蓝文字入口实现；只有被明确设为主动作时才使用主按钮完整状态。
- **EXPORT-R08**：【生成中】使用主题蓝加载图标及正文深灰进度文字；防重复提交，不提前显示成功绿。
- **EXPORT-R09**：【成功与失败】完成使用成功绿图标和明确文案；失败使用错误红图标及短提示，重试操作蓝；文件名始终正文深灰。
- **EXPORT-R10**：【不可导出与焦点】无权限或条件不满足时禁用灰并给原因；可执行入口保留操作蓝键盘焦点，不改成危险红。
- **EXPORT-R11**：【组件边界】导出属于有过程反馈的动作，不自带危险删除语义；准备、生成、下载及失败是不同阶段。
- **EXPORT-R12**：带补充说明的选项分为两行：字段名称14px/400/21px，说明12px/400/18px、辅助深灰，间隔4px；复选框对齐字段名称第一行，不能下沉到说明旁。选中只改变适用状态颜色，不改变字号或字重。
- **EXPORT-R13**：【关闭事件】确认、用户取消和程序关闭分别处理：确认后关闭不能再触发取消或回滚；用户一次取消只处理一次。关闭生命周期回调不等于用户取消。提交期间能否关闭及草稿去留按实际组件约定执行。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **EXPORT-S01**：当前示例：导出项确认中，全选、同步列设置、取消与确认；空选时确认不可用。
- [ ] **EXPORT-S02**：当前示例：同步当前可见列不继承锁定禁用态、不改变字段顺序；固定字段仍可取消导出。
- [ ] **EXPORT-S03**：接入验收：合并字段按真实子字段输出、排除操作列；实际文件表头、顺序、编码、金额精度及导出范围核对。
- [ ] **EXPORT-S04**：接入验收：当前只展示字段选择，不代表文件已经生成或下载；下载成功需真实文件证据。
- [ ] **EXPORT-S05**：核对单行与双行选项：名称字号大于说明，复选框与名称首行居中；选中、取消、禁用前后不改变文字尺寸或对齐。
- [ ] **EXPORT-S06**：接入验收：分别检查确认、取消、叉号、Esc、遮罩及父级程序关闭；一次动作只产生一次对应业务结果，确认后不误发取消，禁用的关闭入口不能执行。

### 专题验收重点

初始勾选来自产品配置；点击同步后按当前可见列更新，二者是勾选来源规则。固定字段可取消，空选时确认不可用。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<el-button @click="openExport">打开导出项确认</el-button>
<p class="help">{{ exportResult }}</p>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：历史样板规范 57 / 58；当前规则索引导出标题。
- [打开本专题页面](../index.html#spec-export)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`export`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 导出入口 | 默认导出入口按普通按钮或操作蓝文字入口实现；只有被明确设为主动作时才使用主按钮完整状态。 |
| 生成中 | 使用主题蓝加载图标及正文深灰进度文字；防重复提交，不提前显示成功绿。 |
| 成功与失败 | 完成使用成功绿图标和明确文案；失败使用错误红图标及短提示，重试操作蓝；文件名始终正文深灰。 |
| 不可导出与焦点 | 无权限或条件不满足时禁用灰并给原因；可执行入口保留操作蓝键盘焦点，不改成危险红。 |

本页只演示导出字段选择；生成中、完成、下载和失败是接入真实导出后的任务阶段，由实际结果触发，不是可选视觉样式。导出不自带危险删除语义。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [存款记录 · 列表工具区 · 导出确认](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)
- [取款审核 · 取款列表 · 导出与下载记录](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md)
- [推广报表 · 日报 · 报表工具区 · 导出](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md)
- [推广报表 · 代理报表 · 导出](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md)
- [运营总览 · 总览数据导出与下载记录](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)