DataGridView - 高性能数据表格组件

基于 vTable 库封装的类似于 WinForm DataGridView 的高性能数据表格组件，为 Vue 3 应用提供一个易用、高性能的数据表格解决方案。

✨ 特性

- 🚀 高性能 - 支持百万级数据展示，利用虚拟滚动技术保证流畅体验
- 🛠️ 易用性 - 提供简洁的 API 接口，开发者可快速集成到各个页面模块
- 📊 功能完整 - 涵盖数据展示、编辑、排序、筛选、分页等核心功能
- 🎨 可扩展 - 支持自定义单元格渲染、编辑器、主题等扩展能力
- 🌗 多主题 - 内置 Arco、Ant Design、深色、简洁等多种主题
- 📱 响应式 - 支持自适应布局和移动端适配

🛠️ 技术栈

| 技术 | 版本 | 用途 |
| ------------------------ | ----- | ---------------- |
| Vue | 3.5+ | 组件开发框架 |
| @visactor/vue-vtable | 1.20+ | 底层表格渲染引擎 |
| @visactor/vtable-editors | 1.20+ | 表格编辑器支持 |
| TypeScript | 5.8+ | 类型安全 |
| Vite | 6.2+ | 构建工具 |

📦 安装

$3

``bash


使用 pnpm

pnpm add data-grid-view-vue3

或使用 npm

npm install data-grid-view-vue3

或使用 yarn

yarn add data-grid-view-vue3
`

$3

`bash


使用 pnpm

pnpm add @visactor/vrender @visactor/vtable-editors @visactor/vtable-plugins @visactor/vue-vtable dayjs vue

或使用 npm

npm install @visactor/vrender @visactor/vtable-editors @visactor/vtable-plugins @visactor/vue-vtable dayjs vue

或使用 yarn

yarn add @visactor/vrender @visactor/vtable-editors @visactor/vtable-plugins @visactor/vue-vtable dayjs vue
`

🚀 快速开始

$3

`vue



`

$3

`vue



`

📚 API 文档

$3

| 属性名 | 类型 | 默认值 | 说明 |
| -------------- | ------------------------------------------------------------- | --------- | ------------------- |
| data | Array> | [] | 表格数据源 |
| columns | DataGridViewColumnsDefine | [] | 列配置定义 |
| height | number \| string | 'auto' | 表格高度 |
| width | number \| string | '100%' | 表格宽度 |
| loading | boolean | false | 加载状态 |
| disable | boolean | false | 是否禁用表格 |
| rowInitializer | RowInitializer | undefined | 行初始化函数 |
| options | VTable.ListTableConstructorOptions & { rowKeyField?: string } | undefined | VTable 原生配置透传 |

$3

| 事件名 | 参数 | 说明 |
| ----------- | ------------------------------------- | -------------- |
| cell-edit | (rowIndex, field, newValue, oldValue) | 单元格编辑完成 |
| row-select | (selectedRows, selectedRowData) | 行选择变化 |
| sort-change | (field, direction) | 排序变化 |
| page-change | (page, pageSize) | 分页变化 |
| data-change | (newData, changeType, changeInfo) | 数据变更 |

$3

| 方法名 | 参数 | 返回值 | 说明 |
| --------------- | ---------------- | ------ | ---------------- |
| getData | () | Array | 获取当前表格数据 |
| setData | (data: Array) | void | 设置表格数据 |
| getSelectedRows | () | Array | 获取选中行数据 |
| clearSelection | () | void | 清空选择 |
| exportData | (format: string) | string | 导出数据 |
| addRow | (data, index?) | void | 添加行 |
| removeRow | (index) | void | 删除行 |
| updateRow | (index, data) | void | 更新行 |

$3

| 类型 | 配置选项 | 使用场景 |
| -------- | ---------------------- | -------- |
| input | placeholder, maxLength | 文本输入 |
| number | min, max, step | 数值输入 |
| select | options, multiple | 下拉选择 |
| date | format | 日期选择 |
| textarea | rows, maxLength | 多行文本 |

🎨 主题

内置主题:

- arco - Arco Design 风格
- antd - Ant Design 风格
- dark - 深色主题
- simple - 简洁主题

🚀 开发

$3

`bash
pnpm dev
`

$3

`bash
pnpm build
`

$3

`bash
pnpm type-check
`

$3

`bash
pnpm lint
pnpm format
`

📖 示例

项目包含一个完整的测试页面，展示了所有功能的使用方法。启动开发服务器后访问 /` 即可查看。

测试页面功能包括:

- 多主题切换
- 实时编辑演示
- 排序和选择功能
- 分页控制
- 大数据量测试
- 数据导出功能
- 事件日志展示

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！