仅桌面端保证样式
ImportExportPanel 导入导出面板
批量导入与数据导出的双分区面板。组件本身不执行网络 IO:选择文件后 emit import-file、点击格式按钮 emit export,由消费方完成上传/导出后调用 done(kind) 收尾。
状态流转:
- 选择文件后面板进入导入中(按钮显示导入中并禁用重复选择),移除文件会自动复位;
- 点击任一导出按钮后导出按钮组整体禁用;
- 两种状态都只能由消费方调用
done('import' | 'export')结束——校验失败要立即done('import'),否则按钮一直转圈。
基础用法
批量导入
仅支持 .xlsx / .csv,单次 5000 行以内
选择文件
数据导出
导出内容为当前筛选结果
导入回调与错误处理
完整闭环示例:import-file 的参数是文件描述对象 { name, size, raw };先做类型/大小校验,失败立即 done('import') 复位,成功则模拟上传后再收尾。
批量导入
仅支持 .xlsx / .csv,单次 5000 行以内
选择文件
数据导出
等待选择文件…
自定义文案与格式按钮
formats 声明导出格式按钮组(默认 [xlsx, csv]),default-format 高亮默认项;accept、import-button-text、分区标题都可定制,例如改成压缩包素材导入。
素材导入
支持 .zip 压缩包,单个 100MB 以内
选择文件
素材导出
导出区扩展内容
export-extra 插槽渲染在导出按钮组下方,适合补充导出范围说明或后台任务提示。
批量导入
选择文件
数据导出
导出内容为当前筛选结果
超过 10 万行将自动转为后台任务,完成后站内通知。
API
ImportExportPanel Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| importTitle / exportTitle | 分区标题 | string | 批量导入 / 数据导出 |
| importTip / exportTip | 分区说明文案 | string | |
| importButtonText | 选择文件按钮文案 | string | 选择文件 |
| action | 上传地址(空则由 import-file 事件处理) | string | |
| accept | 文件类型限制 | string | .xlsx,.xls,.csv |
| autoUpload | 选择后立即上传 | boolean | false |
| templateName | 模板名(非空显示下载模板按钮) | string | |
| formats | 导出格式按钮 | string[] | [xlsx, csv] |
| defaultFormat | 默认高亮格式 | string | xlsx |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| export-extra | 导出按钮组下方的扩展内容 | — | — |
Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| import-file | 选择文件后触发,参数为 { name, size, raw } 等文件描述对象 | (file) => void | — |
| export | 点击导出格式按钮 | (format: string) => void | — |
| download-template | 点击下载模板 | () => void | — |
Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| done | IO 完成收尾;done(import) 复位导入按钮,done(export) 恢复导出按钮组 | (kind?: import | export) => void | import |