Excel 组件

基于 Canvas 的高性能 Excel 表格组件，支持数据变更对比展示。

特性

• 基于 Canvas 渲染，高性能展示大量数据
• 支持单元格编辑、添加行、删除行
• 支持展示数据变更，包括删除、新增和修改
• 支持自定义列宽、只读属性等
• 支持错误单元格标记
• 使用图片资源作为图标，显示效果更佳

安装

pnpm add @senyao-design-system/excel

使用方法

基本使用

import { Excel } from '@senyao-design-system/excel';
import '@senyao-design-system/excel/dist/excel.css';

const App = () => {
  const data = [
    {
      name: '张三',
      age: '25',
      email: '[email protected]',
    },
    {
      name: '李四',
      age: '30',
      email: '[email protected]',
    },
  ];

  const columns = [
    {
      dataIndex: 'name',
      title: '姓名',
      width: 100,
    },
    {
      dataIndex: 'age',
      title: '年龄',
      width: 80,
    },
    {
      dataIndex: 'email',
      title: '邮箱',
      width: 200,
    },
  ];

  return (
    <div style={{ width: '800px', height: '400px' }}>
      <Excel data={data} columns={columns} />
    </div>
  );
};

变更功能使用

Excel 组件支持展示数据变更，包括删除、新增和修改的展示，具有以下视觉效果：

• 删除的单元格：显示绿色文本（#00AE83）并使用同色贯穿整个单元格的中划线
• 新增的单元格：在单元格左侧显示绿色加号图标，文本使用特殊颜色（#00AE83）
• 修改的单元格：显示为 "旧值 → 新值" 的格式，新值使用特殊颜色（#00AE83），中间有箭头图标
• 所有变更单元格的背景色为 #E4F8EF

import { Excel, ChangeItem } from '@senyao-design-system/excel';
import '@senyao-design-system/excel/dist/excel.css';

const App = () => {
  const data = [
    {
      name: '张三',
      age: '25',
      email: '[email protected]',
    },
    {
      name: '李四',
      age: '30',
      email: '[email protected]',
    },
    {
      name: '王五',
      age: '28',
      email: '[email protected]',
    },
  ];

  const columns = [
    {
      dataIndex: 'name',
      title: '姓名',
      width: 100,
    },
    {
      dataIndex: 'age',
      title: '年龄',
      width: 80,
    },
    {
      dataIndex: 'email',
      title: '邮箱',
      width: 200,
    },
  ];

  // 变更记录
  const changes: ChangeItem[] = [
    // 删除的行
    {
      op: 'd',
      row: 2, // 第三行（王五）
    },
    // 修改的行
    {
      op: 'm',
      row: 1, // 第二行（李四）
      cols: [0, 2], // 修改了 name 和 email 字段
      before: {
        name: '李四',
        email: '[email protected]',
      },
      after: {
        name: '李四-修改后',
        email: '[email protected]',
      },
    },
    // 新增的行
    {
      op: 'c',
      row: 0, // 第一行（张三）
    },
  ];

  return (
    <div style={{ width: '800px', height: '400px' }}>
      <Excel data={data} columns={columns} changes={changes} readonly={true} />
    </div>
  );
};

变更模式详解

1. 删除行

删除的单元格会以绿色（#00AE83）显示文本，并在文本上显示同色中划线，中划线完全贯穿整个单元格。背景色为浅绿色（#E4F8EF）。

2. 修改行

修改过的单元格会以 "旧值 → 新值" 的格式显示，中间带有箭头图标，新值使用 #00AE83 颜色突出显示。箭头图标使用 [email protected] 图片资源。

3. 新增行

新增的单元格在文本左侧会有一个绿色加号图标，整个文本使用 #00AE83 颜色显示。加号图标使用 [email protected] 图片资源，位于单元格左侧。

4. 图标渲染

所有图标（加号和箭头）都使用外部图片资源，确保视觉效果的一致性和美观性。图片资源位于 assets 目录下：

• 新增单元格图标：[email protected]
• 修改单元格箭头图标：[email protected]

API 参考

Excel 组件属性

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 表格数据 | RowData[] | [] | | columns | 表格列配置 | ColumnType[] | [] | | readonly | 是否只读 | boolean | false | | showSerialNumber | 是否显示序号 | boolean | true | | onCellEdited | 单元格编辑后的回调 | (cell: [number, number], newVal: any) => void | - | | onAddRows | 添加行的回调 | (params: { rowFollowed: number; num: number }) => void | - | | onDeleteRows | 删除行的回调 | (params: { rows: number[] }) => void | - | | changes | 变更记录 | ChangeItem[] | [] |

ColumnType 类型

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 列标题 | string | - | | dataIndex | 数据字段名 | string | - | | key | 列的唯一标识 | string | - | | width | 列宽 | number | - | | readonly | 此列是否只读 | boolean | true |

ChangeItem 类型

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | op | 操作类型，c: 新增, m: 修改, d: 删除 | 'c' \| 'm' \| 'd' | - | | row | 行索引 | number | - | | cols | 列索引数组，仅用于修改操作 | number[] | - | | before | 变更前的数据，用于修改操作 | any | - | | after | 变更后的数据，用于修改操作 | any | - |