syncfusion-vue-grid

实现 Vue 网格组件

Syncfusion Vue Grid 是一款面向企业的 Vue 2 和 Vue 3 数据表格组件，可提供强大的数据可视化和处理功能。它对于创建响应式、功能丰富的数据应用至关重要。

⚠️ 安全与信任边界

• Grid 技能不会执行任何远程数据访问。
• 所有外部 API 交互均由此技能信任边界之外的独立 DataManager 技能处理。

目录

• 何时使用此技能
• 组件概览
• 文档导航
• 快速入门示例
• 常见模式
• 关键属性参考
• 主要使用场景
• 模块注入

何时使用此技能

在以下情况下使用此技能：

• 使用高级交互功能展示和管理表格数据
• 实现 CRUD（创建、读取、更新、删除）操作
• 构建具备排序、筛选和分组功能的丰富数据表格
• 创建包含数据可视化功能的响应式仪表板
• 将网格连接到各种数据源（本地、API、数据库）
• 将数据导出为多种格式（Excel、PDF、CSV）
• 实现支持虚拟滚动和性能优化的实时网格

组件概览

Vue Grid 基于 Syncfusion 的 Essential JS 2 框架构建，并提供以下功能：

• 数据绑定：使用 DataManager 绑定本地和远程数据源
• 列管理：类型定义、模板、重新排序、调整大小、冻结
• 数据操作：排序、筛选（多种模式）、分组、聚合
• 选择：行、单元格、列和复选框选择模式
• 编辑：支持验证的行内编辑、对话框编辑和批量编辑
• 导出：支持模板的 Excel、PDF、CSV 导出
• 模板：自定义行、单元格和标题模板
• 性能：虚拟滚动、无限滚动、不可变模式
• UI 功能：上下文菜单、工具栏、状态管理、剪贴板
• 国际化：本地化、RTL 支持、多种格式
• 无障碍访问：符合 WCAG 标准、键盘导航

文档导航

入门

📄 阅读： references/getting-started.md

• 安装和设置（Vue 2 和 Vue 3）
• 软件包配置
• Quasar Framework 设置
• CSS 主题导入
• 创建首个组件
• 启用核心功能

数据绑定

📄 阅读： references/data-binding.md

• 本地数据绑定
• 远程数据绑定
• DataManager 适配器
• CRUD 操作
• 加载指示器
• 实时更新
• 刷新和更新数据
• 离线模式
• 不可变模式
• 时区处理
• 导出操作

连接适配器

📄 阅读： references/adaptors.md

• URL 适配器
• ODataV4 适配器
• Web API 适配器
• GraphQL 适配器
• Web method 适配器
• RemoteSave 适配器
• 自定义适配器配置

Grid 功能模块

📄 阅读： references/module.md

• 模块介绍
• 完整模块列表
• 默认注入的模块
• 模块注入示例
• 功能依赖项

Vue 2 配置

📄 阅读： references/vue2.md

• 列
• 行
• 单元格
• 自适应 UI
• 模块
• 性能优化
• 数据绑定（Vue 2）
• 编辑
• 排序
• 分组
• 筛选
• 滚动
• 搜索
• 分页
• 选择
• 导出操作
• 聚合
• 打印
• 层次结构绑定
• 状态管理
• 工具栏

列

📄 阅读： references/columns.md

• 列数据类型
• 列宽度
• 列格式
• 字段映射
• 列渲染
• 列模板
• 列标题
• 外键列
• 列选择器
• 列菜单
• 列重新排序
• 列调整大小
• 行和列跨越

冻结列

📄 阅读： references/frozen.md

• 冻结列
• 冻结方向（左侧、右侧、两侧）
• 以编程方式冻结/取消冻结
• 分屏视图配置

单元格

📄 阅读： references/cell.md

• 单元格样式
• 单元格内容
• 单元格换行和裁剪
• 单元格工具提示
• 网格线
• 单元格事件
• 单元格格式设置

剪贴板

📄 阅读： references/clipboard.md

• 复制到剪贴板功能
• 复制时包含标题
• 通过外部按钮复制
• 拖动填充
• 粘贴操作
• 键盘快捷键（Ctrl+C、Ctrl+Shift+H）

行

📄 阅读： references/rows.md

• 行数据类型
• 行样式
• 行高
• 行模板
• 详情模板
• 行拖放
• 跨行
• 行固定
• 行选择

筛选

📄 阅读： references/filtering.md

• 基本筛选
• 筛选栏
• 筛选菜单
• 类似 Excel 的筛选
• 复选框筛选
• 筛选配置
• 变音符号筛选
• 筛选事件
• 常见筛选模式

排序

📄 阅读： references/sorting.md

• 基本排序
• 排序方向
• 多列排序
• 外键排序
• 自定义排序比较器
• 基于区域设置的排序
• 以编程方式排序
• 排序事件
• 触摸和手势排序
• 自定义排序图标

分页

📄 阅读： references/paging.md

• 分页配置
• 每页大小选项
• 分页器自定义
• 分页器位置
• 页面导航
• 自定义分页器模板

滚动

📄 阅读： references/scrolling.md

• 基本滚动
• 虚拟滚动
• 无限滚动
• 列虚拟化
• 粘性标题
• 滚动条自定义
• 性能调优
• 高级滚动

性能最佳实践

📄 阅读： references/performance.md

• 提升大型数据集的加载性能
• 对大型数据集进行分页
• 行虚拟化
• 无限滚动
• 列虚拟化
• 使用模板优化渲染
• CRG 优化
• 服务端数据操作
• 处理大型 JSON 负载
• Excel 导出限制

编辑

📄 阅读： references/editing.md

• 启用编辑
• 编辑模式（Normal、Dialog、Batch、Template）
• 编辑类型（文本、数字、下拉列表、日期）
• 行内编辑
• 对话框编辑
• 批量编辑
• 模板编辑
• 服务端持久化
• 高级编辑

列验证

📄 阅读： references/validation.md

• 必填字段验证
• 数字验证
• 电子邮件验证
• 最小长度验证
• 自定义验证规则
• 根据下拉列表变更进行自定义验证
• 动态添加或移除验证规则
• 防止重复行

命令列编辑

📄 阅读： references/command-column.md

• 基本命令列
• 自定义命令列
• CRUD 操作按钮（Edit、Delete、Save、Cancel）
• 自定义命令处理程序
• 自定义按钮外观和图标

分组

📄 阅读： references/grouping.md

• 基本分组
• 禁止对特定列分组
• 多级分组
• 重新排序分组列
• 分组分页
• 分组标题模板
• 按格式分组
• 折叠/展开分组
• 以编程方式分组
• 对分组列排序
• 延迟加载分组
• 分组事件

聚合

📄 阅读： references/aggregates.md

• 基本聚合
• 聚合类型（Sum、Average、Count、Max、Min）
• 页脚聚合
• 分组聚合
• 自定义聚合
• 响应式聚合
• 多个聚合

选择

📄 阅读： references/selection.md

• 行选择
• 单元格选择
• 列选择
• 复选框选择
• 多选
• 键盘快捷键
• 选择事件

层级绑定

📄 阅读： references/hierarchical-binding.md

• 主从网格
• 子网格配置
• 详情模板
• 展开和折叠
• 层级事件

状态管理

📄 阅读： references/state-management.md

• 网格状态
• 保存状态
• 恢复状态
• 本地存储持久化
• 不可变模式

工具栏

📄 阅读： references/toolbar.md

• 工具栏配置
• 内置工具栏项（导出、编辑、删除、搜索）
• 自定义工具栏项
• 工具栏位置
• 启用或禁用工具栏项
• 使用 CSS 自定义工具栏

上下文菜单

📄 阅读： references/context-menu.md

• 启用上下文菜单
• 左键单击上下文菜单
• 启用/禁用菜单项
• 显示/隐藏菜单项
• 自定义菜单项
• 菜单事件
• 实用示例

打印

📄 阅读： references/printing.md

• 启用打印
• 打印工具栏配置
• 打印模式（全部、当前页、已选内容）
• 自定义打印
• 打印事件

Excel 导出

📄 阅读： references/excel-export.md

• 基本 Excel 导出
• 导出选项（已选内容、当前页、全部数据）
• 自定义导出
• 样式和格式
• 高级功能
• CSV 导出限制

PDF 导出

📄 阅读： references/pdf-export.md

• 基本 PDF 导出
• 导出选项（已选内容、当前页、全部数据）
• 自定义导出
• 页眉和页脚配置
• 高级功能

搜索

📄 阅读： references/searching.md

• 启用搜索功能
• 搜索栏配置
• 以编程方式搜索
• 搜索事件
• 高级搜索

全球化

📄 阅读： references/globalization.md

• 区域设置（50 多种语言）
• 加载翻译
• 数字格式
• 日期格式
• 国际化
• RTL 支持（阿拉伯语、希伯来语、波斯语、乌尔都语）
• 自定义翻译
• 实用示例

无障碍

📄 阅读： references/accessibility.md

• WAI-ARIA 属性
• 键盘导航
• 自定义键盘快捷键
• 阻止默认按键行为
• 屏幕阅读器支持
• 符合 WCAG 标准

样式和外观

📄 阅读： references/style-and-appearance.md

• 主题选择（Material、Bootstrap、Fluent、Tailwind）
• CSS 样式
• 单元格样式
• 行样式
• 标题样式
• 分页样式
• 排序样式
• 筛选样式
• 分组样式
• 工具栏样式
• 编辑样式
• 汇总样式
• 选择样式
• 响应式设计
• 深色模式

自适应 UI

📄 阅读： references/adaptive.md

• 启用自适应 UI
• 自适应渲染模式（详情、网格、两者）
• 与虚拟化结合使用的自适应 UI
• 移动设备处理
• 响应式列
• 自适应详情模板

网格属性

📄 阅读： references/grid-properties.md

• 所有属性概览
• 数据管理属性
• 显示属性
• 功能标志和切换项
• 配置属性
• 高级功能属性
• 状态属性
• 行为属性
• 模块引用

网格事件

📄 阅读： references/grid-events.md

• 数据绑定事件
• 操作事件
• 编辑事件
• 选择事件
• 列事件
• 排序和筛选事件
• 分组事件
• 行事件
• 单元格事件
• 导出和打印事件
• 菜单事件
• 模板事件
• 批处理模式事件
• 生命周期事件

网格方法

📄 阅读： references/grid-methods.md

• 记录管理方法
• 单元格和行方法
• 选择方法
• 列方法
• 排序和筛选方法
• 分组方法
• 分页方法
• 导出和打印方法
• 数据绑定方法
• 搜索方法
• 编辑方法
• 模板和生命周期方法
• UI 控件方法
• 实用工具方法

使用 Jest 测试 Vue 网格

📄 阅读： references/test-case.md

• 配置 Jest 环境
• 添加 Grid 组件
• 创建测试用例
• 快照测试
• DOM 测试
• 运行测试

快速入门示例

<template>
  <div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting="true" :allowFiltering="true">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
        <e-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="130"></e-column>
        <e-column field="Freight" headerText="Freight" type="number" format="C2" width="100"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { provide } from 'vue';

provide('grid', [Page, Sort, Filter]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>

常见模式

模式 1：带 CRUD 操作的网格

1. 启用 editSettings（allowEditing、allowAdding、allowDeleting）
2. 配置 toolbar，添加 Edit、Add、Delete、Update、Cancel 项
3. 使用 isPrimaryKey: true 设置主键
4. 处理 actionComplete 事件以更新服务器
5. 使用 allowPaging 处理大型数据集

模式 2：支持数据驱动筛选和排序的网格

1. 将 dataSource 绑定到包含远程数据的 DataManager
2. 启用 allowSorting 和 allowFiltering
3. 配置列 type，以使用合适的筛选 UI
4. 使用 filterSettings 设置默认筛选条件
5. 使用 toolbar: ['Search'] 启用搜索

模式 3：带汇总值的分组数据

1. 启用 allowGrouping 并注入 Group 模块
2. 使用列名设置 groupSettings
3. 添加包含汇总列的 e-aggregates
4. 定义 footerTemplate 以显示摘要
5. 使用 groupCaptionTemplate 设置分组标题

关键属性参考

必备 Grid 属性：

• dataSource - 数据源（数组、DataManager 或 URL）
• allowPaging - 启用分页（布尔值）
• pageSettings - 分页器配置
• allowSorting - 启用排序（布尔值）
• allowFiltering - 启用筛选（布尔值）
• allowGrouping - 启用分组（布尔值）
• allowSelection - 启用行选择（布尔值）
• selectionSettings - 选择配置
• editSettings - CRUD 配置
• toolbar - 工具栏项
• height - 网格高度（像素或百分比）
• enableVirtualization - 虚拟滚动

列属性：

• field - 数据字段绑定
• headerText - 列标题文本
• width - 列宽（像素或百分比）
• type - 列数据类型（字符串、数字、日期、布尔值、复选框）
• isPrimaryKey - 主键列标识
• allowSorting - 允许对列排序
• allowFiltering - 允许对列筛选
• template - 自定义单元格模板
• editTemplate - 自定义编辑模板

主要使用场景

1. 电子商务商品管理：显示商品，支持排序、筛选、编辑和导出到 Excel
2. 财务报告：按类别对数据分组，显示汇总值（总和、平均值），导出为 PDF
3. CRM 仪表板：多列筛选、选择行以执行批量操作、虚拟滚动
4. 性能监控：实时更新网格，使用虚拟滚动处理 10K+ 行
5. 管理面板：带验证的行内编辑、分层数据、状态持久化
6. 数据分析：复杂分组、汇总值、自定义可视化模板
7. 库存系统：批量编辑、搜索、导出、数据库连接
8. 调查/表单收集：对话框编辑、自定义验证器、导出 PDF

---

模块注入

大多数高级功能都需要在 provide 部分注入模块：

provide('grid', [
  Page,           // Paging
  Sort,           // Sorting
  Filter,         // Filtering
  Search,         // Search feature
  Group,          // Grouping
  Aggregate,      // Aggregates
  Edit,           // CRUD editing
  ExcelExport,    // Excel export
  PdfExport,      // PDF export
  Resize,         // Column resize
  Reorder,        // Column reorder
  ColumnMenu,     // Column menu
  Selection,      // Row selection
  Toolbar,        // Toolbar
  CommandColumn   // Command column
])