e-virt-table 虚拟表格组件 API 详解

e-virt-table 是一个高性能的虚拟表格组件，专为处理大数据量场景设计。本文将全面解析该组件的 API 接口，帮助开发者更好地理解和使用这个强大的表格组件。

核心概念

虚拟化技术

e-virt-table 采用虚拟化技术，只渲染可视区域内的单元格，大幅提升了大数据量下的渲染性能。这种技术特别适合处理成千上万行数据的场景。

数据驱动

组件采用数据驱动设计，所有表格状态（如选中、编辑、排序等）都通过数据变化来驱动视图更新。

初始化配置

EVirtTable 构造函数

EVirtTable(target: HTMLDivElement, options: EVirtTableOptions)

初始化参数 EVirtTableOptions 包含以下属性：

• data: 表格主体数据数组
• footerData: 表格底部数据数组
• columns: 列配置数组
• config: 全局配置对象（可选）
• overlayerElement: 覆盖层元素（可选）
• editorElement: 编辑器元素（可选）
• emptyElement: 空数据提示元素（可选）
• contextMenuElement: 右键菜单元素（可选）

全局配置详解

基础配置

• ROW_KEY: 行的唯一标识键（必须为字符串类型）
• WIDTH/HEIGHT: 表格宽高，0 表示自适应
• MAX_HEIGHT: 表格最大高度
• BORDER_RADIUS: 边框圆角半径
• BORDER_COLOR: 边框颜色

样式配置

• HEADER_HEIGHT: 表头行高
• HEADER_BG_COLOR: 表头背景色
• BODY_BG_COLOR: 表格主体背景色
• HEADER_TEXT_COLOR: 表头文字颜色
• CELL_HEIGHT: 单元格行高
• CELL_PADDING: 单元格内边距

功能配置

• ENABLE_SELECTOR: 是否启用选择器
• ENABLE_EDIT_CLICK_SELECTOR: 是否启用点击选择器编辑
• ENABLE_AUTOFILL: 是否启用自动填充
• ENABLE_CONTEXT_MENU: 是否启用右键菜单
• ENABLE_COPY/ENABLE_PASTER: 是否启用复制粘贴
• ENABLE_RESIZE_ROW/ENABLE_RESIZE_COLUMN: 是否允许调整行高列宽
• ENABLE_KEYBOARD: 是否启用键盘操作
• ENABLE_HISTORY: 是否启用操作历史记录

列配置(Column)

基础属性

• key: 列的唯一标识（必需）
• title: 列标题（必需）
• type: 列类型（index/selection/index-selection/tree/number）
• width: 列宽度
• align: 水平对齐方式（left/center/right）
• verticalAlign: 垂直对齐方式（top/middle/bottom）

功能属性

• editorType: 编辑器类型
• readonly: 是否只读
• rules: 校验规则
• render: 自定义渲染方法
• formatter: 数据格式化方法
• overflowTooltipShow: 是否显示溢出提示
• hoverIconName: 悬浮图标名称

行配置(Row)

除了常规数据字段外，行对象支持以下特殊属性：

• _readonly: 整行只读
• _height: 自定义行高
• _hasChildren: 是否有子节点（仅 type=tree 时有效）

事件系统

常用事件

• change: 数据变更事件（包括编辑、复制、填充等操作）
• selectionChange: 选中状态变更事件
• validateChangedData: 通过校验的数据变更事件
• editChange: 编辑状态变更事件
• resizeColumnChange/resizeRowChange: 列宽/行高调整事件

交互事件

• cellClick: 单元格点击事件
• cellMouseenter: 鼠标进入单元格事件
• cellContextMenuClick: 右键菜单点击事件
• startEdit/doneEdit: 开始/结束编辑事件

常用方法

数据操作

• loadData: 加载表格数据
• setItemValue: 设置单元格值
• batchSetItemValue: 批量设置值
• getChangedData: 获取变更数据
• validate: 数据校验

选择操作

• clearSelection: 清除选中
• toggleRowSelection: 切换行选中状态
• getSelectionRows: 获取选中行数据
• toggleAllSelection: 切换全选状态

滚动控制

• scrollTo: 滚动到指定位置
• scrollToRowkey: 滚动到指定行
• scrollToColkey: 滚动到指定列

其他功能

• setExpandRowKeys: 设置展开行
• getUtils: 获取工具方法（如合并行列）
• destroy: 销毁表格实例

高级功能

自定义渲染

通过 render、renderHeader、renderFooter 等属性可以实现单元格、表头、表尾的自定义渲染。

数据校验

基于 async-validator 实现的数据校验系统，支持自定义校验规则和方法。

树形结构

通过设置 type="tree" 和相关配置，可以实现树形表格展示。

历史记录

启用 ENABLE_HISTORY 后，表格会记录操作历史，支持撤销/重做功能。

最佳实践

1. 大数据量优化：合理设置 CELL_HEIGHT 和 CELL_WIDTH 以优化渲染性能
2. 列宽自适应：对于变长内容列，设置合适的 overflowTooltip 配置
3. 校验策略：复杂校验建议使用 BODY_CELL_RULES_METHOD 自定义方法
4. 性能监控：大数据量下关注 onScroll 事件性能

通过深入理解这些 API 和配置项，开发者可以充分发挥 e-virt-table 的强大功能，构建高性能、高交互性的数据表格应用。