基于 vTable 库封装的高性能数据表格组件,类似于 WinForm DataGridView,支持虚拟滚动、实时编辑、多主题等功能。
npm install data-grid-view-vue3基于 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+ | 构建工具 |
``bash使用 pnpm
pnpm 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
:data="tableData"
:columns="columns"
:height="600"
theme="arco"
:editable="true"
:selectable="true"
@cell-edit="onCellEdit"
@row-select="onRowSelect"
/>
`$3
`vue
:data="tableData"
:columns="advancedColumns"
:height="'auto'"
theme="dark"
:pagination="paginationConfig"
:editable="true"
:selectable="true"
:sortable="true"
:filterable="true"
:loading="loading"
@cell-edit="onCellEdit"
@sort-change="onSortChange"
@page-change="onPageChange"
/>
`📚 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 来改进这个项目!