@qynpm/excel-preview

Qy 表格数据预览和轻量编辑组件。组件接收已经归一化的二维数组或对象数组；x-data-spreadsheet 只在包内部 renderer 中使用，不解析 .xlsx/.xls，也不调用业务接口。

使用

<script setup lang="ts">
import { ref } from 'vue'
import { QyExcelPreview, type QyExcelRow } from '@qynpm/excel-preview'

const open = ref(false)
const rows = ref<QyExcelRow[]>([])
const columns = [
  { key: 'name', title: '名称' },
  { key: 'quantity', title: '数量' },
  { key: 'enabled', title: '启用', readOnly: true }
]
const data = [
  { name: '纸箱', quantity: 0, enabled: false },
  { name: '标签', quantity: 12, enabled: true }
]
</script>

<template>
  <button type="button" @click="open = true">预览</button>
  <QyExcelPreview
    v-model:open="open"
    :data="data"
    :columns="columns"
    title="表格预览"
    @confirm="rows = $event"
  />
</template>

Qy 公共协议

• props：open、data、columns、title、width、height、readOnly、freezeRows、freezeColumns、loading、error、emptyText。
• data 可以是二维数组或按 column key 读取的对象数组；null 映射为空文本，数字、布尔值和 Date 映射为稳定文本。
• columns 的 key 必须非空且不能重复；readOnly 可锁定单列，readOnly prop 可锁定整张表。第一行是列标题，默认冻结标题行。
• emits：update:open(false)、confirm(rows)、cancel。确认只返回按 column key 组装的非空行；0 和 false 的文本不会被当作空行。
• expose：reload()、getRows()、close()。不暴露 Spreadsheet 实例、vendor event 或私有 DOM。

单组件入口：

import QyExcelPreview from '@qynpm/excel-preview/qy-excel-preview'

宿主仍需按当前 Qy UI 约定提供 @qynpm/ui、Vue 和 Element Plus runtime。文件解析、上传、业务 API、字段转换和确认后的提交逻辑由宿主负责。