项目介绍

这是一个基于Electron for 鸿蒙PC开发的高性能高级表格组件，专为处理大规模数据场景设计。该组件整合了企业级应用所需的核心表格功能，提供流畅的操作体验和灵活的配置选项，适用于数据分析、后台管理系统、报表展示等专业场景。

功能特点

• 虚拟滚动：支持百万级数据高效渲染，仅加载可视区域内容，大幅提升大数据场景下的性能
• 列冻结：支持左侧/右侧固定列设置，滚动时保持关键列可见
• 多级表头：支持嵌套式多级表头结构，满足复杂数据展示需求
• 单元格合并：支持横向/纵向单元格合并，适配不规则表格布局
• 数据筛选：多条件组合筛选，支持文本、数字、日期等多种数据类型
• 灵活排序：支持单列/多列排序，可配置升序/降序规则
• 数据分组：按指定字段对数据进行层级分组，支持展开/折叠操作
• 响应式设计：自动适配不同屏幕尺寸，在移动设备上优化显示效果
• 编辑功能：支持单元格直接编辑，提供多种编辑器类型（文本、下拉、日期等）
• 主题适配：支持浅色/深色主题，可自定义样式变量

技术实现

主进程（main.js）

主进程负责应用窗口管理和数据服务模拟，通过Electron的IPC机制提供大数据集的分页加载能力，避免渲染进程内存溢出。

预加载脚本（preload.js）

使用contextBridge暴露表格核心API，包括数据加载、本地存储（表格配置保存）等功能，确保渲染进程安全访问系统资源。

渲染进程（renderer.js）

实现表格的核心交互逻辑：

• 虚拟滚动引擎：计算可视区域、动态渲染/销毁DOM节点
• 布局引擎：处理列冻结、多级表头和单元格合并的布局计算
• 数据处理器：实现筛选、排序、分组的核心算法
• 事件系统：处理单元格点击、拖拽、编辑等交互事件
• 状态管理：维护表格的滚动位置、选中状态、展开/折叠状态等

样式实现（style.css）

通过CSS变量实现主题定制，使用grid和flex布局构建表格结构，通过transform实现虚拟滚动的平滑效果，针对不同状态（hover、选中、编辑）设计视觉反馈。

工具类（tableUtils.js）

封装表格处理的核心算法：

• 虚拟滚动计算函数（可视区域行索引、偏移量计算）
• 数据排序算法（支持多列组合排序）
• 筛选器函数（多条件匹配逻辑）
• 分组数据转换函数（平级数据→层级结构）
• 单元格合并规则处理器

代码结构

• main.js - Electron主进程代码，管理窗口与数据服务
• preload.js - 预加载脚本，安全暴露系统级API
• index.html - 表格组件界面结构
• style.css - 样式定义，包含主题与响应式设计
• renderer.js - 渲染进程逻辑，处理表格核心功能
• tableUtils.js - 表格处理工具类，提供算法支持
• tableConfig.js - 表格配置管理，处理列定义与状态保存

核心代码示例

1. 虚拟滚动实现

// 虚拟滚动核心逻辑
class VirtualScroll {
  constructor(tableContainer, options) {
    this.container = tableContainer;
    this.rowHeight = options.rowHeight || 40;
    this.data = options.data || [];
    this.visibleCount = 0;
    this.startIndex = 0;
    
    // 绑定滚动事件
    this.container.addEventListener('scroll', this.handleScroll.bind(this));
    this.calculateVisibleRange();
  }
  
  // 计算可视区域范围
  calculateVisibleRange() {
    const { scrollTop, clientHeight } = this.container;
    this.visibleCount = Math.ceil(clientHeight / this.rowHeight) + 2; // 额外渲染2行用于缓冲
    this.startIndex = Math.floor(scrollTop / this.rowHeight);
    this.endIndex = Math.min(this.startIndex + this.visibleCount, this.data.length);
    
    // 更新渲染区域
    this.updateRenderedRows();
  }
  
  // 更新渲染的行
  updateRenderedRows() {
    const visibleData = this.data.slice(this.startIndex, this.endIndex);
    const offsetY = this.startIndex * this.rowHeight;
    
    // 仅渲染可视区域的行
    this.container.querySelector('.table-body').innerHTML = `
      <div class="virtual-scroll-placeholder" style="height: ${this.data.length * this.rowHeight}px"></div>
      <div class="visible-rows" style="transform: translateY(${offsetY}px)">
        ${visibleData.map((row, index) => this.renderRow(row, this.startIndex + index)).join('')}
      </div>
    `;
  }
  
  handleScroll() {
    this.calculateVisibleRange();
  }
  
  // 渲染单行
  renderRow(row, index) {
    // 行渲染逻辑...
  }
}

2. 列冻结实现

// 列冻结布局处理
function setupFrozenColumns(table, frozenColumns) {
  const tableWidth = table.offsetWidth;
  const frozenWidth = frozenColumns.reduce((sum, col) => sum + col.width, 0);
  
  // 创建冻结列容器
  const frozenContainer = document.createElement('div');
  frozenContainer.className = 'frozen-column-container';
  frozenContainer.style.width = `${frozenWidth}px`;
  frozenContainer.style.height = `${table.offsetHeight}px`;
  
  // 克隆表头和表体用于冻结列
  const frozenHeader = table.querySelector('thead').cloneNode(true);
  const frozenBody = table.querySelector('tbody').cloneNode(true);
  
  // 只保留需要冻结的列
  [frozenHeader, frozenBody].forEach(part => {
    Array.from(part.querySelectorAll('tr')).forEach(row => {
      const cells = Array.from(row.children);
      cells.forEach((cell, index) => {
        if (!frozenColumns.some(col => col.index === index)) {
          cell.remove();
        }
      });
    });
  });
  
  frozenContainer.appendChild(frozenHeader);
  frozenContainer.appendChild(frozenBody);
  table.parentNode.appendChild(frozenContainer);
  
  // 主表格偏移，避免与冻结列重叠
  table.style.marginLeft = `${frozenWidth}px`;
  table.style.width = `${tableWidth - frozenWidth}px`;
  
  // 同步滚动
  table.querySelector('.table-body').addEventListener('scroll', (e) => {
    frozenBody.style.transform = `translateY(-${e.target.scrollTop}px)`;
  });
}

3. 数据排序与筛选

// 多列排序处理
function sortData(data, sortConfig) {
  // sortConfig格式: [{ column: 'field', direction: 'asc' }, ...]
  return [...data].sort((a, b) => {
    for (const { column, direction } of sortConfig) {
      if (a[column] < b[column]) {
        return direction === 'asc' ? -1 : 1;
      }
      if (a[column] > b[column]) {
        return direction === 'asc' ? 1 : -1;
      }
    }
    return 0;
  });
}

// 多条件筛选
function filterData(data, filters) {
  // filters格式: [{ column: 'field', operator: 'contains', value: 'xxx' }, ...]
  return data.filter(row => {
    return filters.every(({ column, operator, value }) => {
      const cellValue = row[column];
      switch (operator) {
        case 'contains':
          return String(cellValue).includes(value);
        case 'equals':
          return cellValue === value;
        case 'greaterThan':
          return cellValue > value;
        case 'lessThan':
          return cellValue < value;
        // 其他运算符...
        default:
          return true;
      }
    });
  });
}

4. 数据分组实现

// 数据分组处理
function groupData(data, groupBy) {
  // groupBy格式: ['groupField1', 'groupField2']
  if (!groupBy || groupBy.length === 0) return [{ type: 'data', rows: data }];
  
  const groups = {};
  const currentGroupField = groupBy[0];
  const remainingGroupFields = groupBy.slice(1);
  
  // 按当前字段分组
  data.forEach(row => {
    const groupKey = row[currentGroupField];
    if (!groups[groupKey]) {
      groups[groupKey] = [];
    }
    groups[groupKey].push(row);
  });
  
  // 递归处理嵌套分组
  return Object.entries(groups).map(([key, rows]) => ({
    type: 'group',
    field: currentGroupField,
    value: key,
    count: rows.length,
    children: remainingGroupFields.length > 0 
      ? groupData(rows, remainingGroupFields) 
      : [{ type: 'data', rows }]
  }));
}

// 渲染分组结构
function renderGroupedRows(groupedData, level = 0) {
  let html = '';
  groupedData.forEach(item => {
    if (item.type === 'group') {
      // 渲染分组标题行
      html += `
        <tr class="group-header level-${level}">
          <td colspan="${columnCount}">
            <div class="group-title" data-group-id="${item.value}">
              <span class="toggle-icon">${item.expanded ? '−' : '+'}</span>
              ${item.field}: ${item.value} (${item.count})
            </div>
          </td>
        </tr>
      `;
      
      // 渲染分组内的子项（如果展开）
      if (item.expanded) {
        html += renderGroupedRows(item.children, level + 1);
      }
    } else if (item.type === 'data') {
      // 渲染数据行
      html += item.rows.map(row => renderRow(row)).join('');
    }
  });
  return html;
}

如何使用

基本使用

1. 定义表格配置和列信息

const tableConfig = {
  columns: [
    { field: 'id', title: 'ID', width: 80, frozen: true },
    { field: 'name', title: '名称', width: 150 },
    { field: 'category', title: '类别', width: 120 },
    { field: 'price', title: '价格', width: 100, sortable: true },
    { field: 'date', title: '日期', width: 120, sortable: true }
  ],
  rowHeight: 45,
  virtualScroll: true,
  groupable: true
};

// 初始化表格
const advancedTable = new AdvancedTable('#table-container', tableConfig);

// 加载数据
advancedTable.loadData(largeDataset);

2. HTML结构

<div id="table-container" class="advanced-table">
  <!-- 表格将通过JS动态生成 -->
</div>

高级配置

• 多级表头：通过columns数组的children属性定义

columns: [
  { 
    title: '基本信息', 
    children: [
      { field: 'id', title: 'ID' },
      { field: 'name', title: '名称' }
    ]
  },
  // 其他列...
]

• 单元格合并：通过mergeRules配置合并规则

mergeRules: [
  { 
    column: 'category', 
    // 相同值的相邻单元格合并
    mergeCondition: (row, prevRow) => row.category === prevRow.category 
  }
]

• 筛选与排序：通过API调用

// 设置筛选条件
advancedTable.setFilters([
  { column: 'category', operator: 'equals', value: '电子产品' },
  { column: 'price', operator: 'greaterThan', value: 100 }
]);

// 设置排序
advancedTable.setSorting([
  { column: 'date', direction: 'desc' },
  { column: 'price', direction: 'asc' }
]);

// 设置分组
advancedTable.setGrouping(['category', 'brand']);

运行方法

1. 安装依赖

npm install

2. 启动应用

npm start

3. 运行示例

npm run demo

鸿蒙适配后结构（需整合到 Electron 鸿蒙项目模板中）：

ohos_hap/
├── electron/
│   ├── libs/
│   │   └── arm64-v8a/  # 鸿蒙核心库文件
│   │       ├── libelectron.so
│   │       ├── libadapter.so
│   │       ├── libffmpeg.so
│   │       └── libc++_shared.so
├── web_engine/
│   └── src/
│       └── main/
│           └── resources/
│               └── resfile/
│                   └── resources/
│                       └── app/  # 放置electron应用代码
│                           ├── main.js
│                           ├── package.json
│                           └── src/
└── module.json5        # 鸿蒙应用配置文件

鸿蒙PC适配改造指南

1. 环境准备

• 系统要求：Windows 10/11、8GB RAM以上、20GB可用空间

• 工具安装：
  DevEco Studio 5.0+（安装鸿蒙SDK API 20+）

• Node.js 18.x+

2. 获取Electron鸿蒙编译产物

1. 登录Electron 鸿蒙官方仓库

2. 下载Electron 34+版本的Release包（.zip格式）

3. 解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将Electron应用代码按以下目录结构放置：

web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

1. 打开项目：在DevEco Studio中打开ohos_hap目录

2. 配置签名：
   进入File → Project Structure → Signing Configs

3. 自动生成调试签名或导入已有签名

4. 连接设备：
   启用鸿蒙设备开发者模式和USB调试

5. 通过USB Type-C连接电脑

6. 编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

• ✅ 应用窗口正常显示

• ✅ 窗口大小可调整，响应式布局生效

• ✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误

• ✅ 动画效果正常播放

跨平台兼容性

平台	适配策略	特殊处理
Windows	标准Electron运行	无特殊配置
macOS	标准Electron运行	保留dock图标激活逻辑
Linux	标准Electron运行	确保系统依赖库完整
鸿蒙PC	通过Electron鸿蒙适配层	禁用硬件加速，使用特定目录结构

鸿蒙开发调试技巧

1. 日志查看

在DevEco Studio的Log面板中过滤"Electron"关键词，查看应用运行日志和错误信息。

2. 常见问题解决

• "SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力

• "找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整

• 窗口不显示：在main.js中添加app.disableHardwareAcceleration()

• 动画卡顿：简化CSS动画效果，减少重绘频率