@senyao-design-system/excel v1.0.5

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: 'zhangsan@example.com',
    },
    {
      name: '李四',
      age: '30',
      email: 'lisi@example.com',
    },
  ];

  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: 'zhangsan@example.com',
    },
    {
      name: '李四',
      age: '30',
      email: 'lisi@example.com',
    },
    {
      name: '王五',
      age: '28',
      email: 'wangwu@example.com',
    },
  ];

  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: 'lisi@example.com',
      },
      after: {
        name: '李四-修改后',
        email: 'lisi-new@example.com',
      },
    },
    // 新增的行
    {
      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 颜色突出显示。箭头图标使用 arrowTo@2x.png 图片资源。

3. 新增行

新增的单元格在文本左侧会有一个绿色加号图标，整个文本使用 #00AE83 颜色显示。加号图标使用 add+@2x.png 图片资源，位于单元格左侧。

4. 图标渲染

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

• 新增单元格图标：add+@2x.png
• 修改单元格箭头图标：arrowTo@2x.png

API 参考

Excel 组件属性

ColumnType 类型

ChangeItem 类型