AiExcelEditor

AiExcelEditor 是基于 vxe-table 封装的 Vue 电子表格编辑器。编辑内容会先保留在组件内部，仅在用户保存后触发 update:modelValue，避免每次单元格输入时重复渲染外层组件树。

安装依赖

组件使用 Vue 原生表格引擎，不依赖 React。安装组件库时会一并安装所需依赖；单独开发该组件时可执行：

npm install vxe-table xe-utils

Vue2.6 + Lingxi SDK 示例

使用方式

import { AiExcelEditor } from '@zhiyongui/lingxi-ui'
import '@zhiyongui/lingxi-ui/ai-excel-editor/style.css'

<AiExcelEditor
  v-model="workbook"
  title="销售工作簿"
  :height="520"
  editable
  @save="handleSave"
  @export="handleExport"
/>

工作簿协议

interface AiExcelWorkbook {
  id?: string
  name?: string
  sheets: AiExcelSheet[]
  activeSheetId?: string
  meta?: Record<string, unknown>
}

interface AiExcelSheet {
  id: string
  name: string
  rows?: number
  cols?: number
  cells: Record<string, AiExcelCell>
}

单元格键名使用 A1 表示法，例如 A1、B2、AA12。

API 标准表

Props

属性	类型	默认值	说明
modelValue	AiExcelWorkbook	undefined	受控工作簿数据。
title	string	undefined	编辑器标题。
height	string | number	480	编辑器高度。
editable	boolean	true	是否启用编辑。
readonly	boolean	false	强制只读。
autoSave	boolean	false	编辑后自动保存。
options	Record<string, unknown>	undefined	额外 VXE Grid 选项。
importer	AiExcelImporter	undefined	自定义文件导入函数。
exporter	AiExcelExporter	undefined	自定义工作簿导出函数。
labels	AiExcelEditorLabels	undefined	文案覆盖。

Events

事件	参数	说明
update:modelValue	workbook	工作簿提交到外层模型。
save	workbook	保存或自动保存。
change	workbook	保存后的工作簿变化。
export	type, payload, workbook	导出完成。
error	unknown	导入或导出异常。

Slots

当前无公开 slot。

Exposes

方法	参数	说明
save()	-	保存当前工作簿，并触发 save、update:modelValue、change。
reset()	-	恢复到上次保存状态。
exportWorkbook(type)	AiExcelExportType	导出工作簿。
getWorkbook()	-	获取当前工作簿。
getDirty()	-	返回是否存在未保存修改。

样式入口

import '@zhiyongui/lingxi-ui/ai-excel-editor/style.css'

FAQ

为什么编辑单元格后外层 modelValue 没立即变化？

编辑器会维护内部草稿。手动保存或开启 autoSave 后才会提交给外层。