极米投影仪
149.20M · 2026-03-22
去年和大家分享了我的AI产品 pxcharts 超级表格的创业故事：
同时我们也利用业余时间，基于国内公司最喜欢的技术栈Vue3全家桶，偷偷做了一款完全开源版的多维表格 pxcharts-vue：
设计风格完全对标飞书和钉钉AI表格，大家可以基于这个方案轻松实现多维表格产品。话不多说，先上开源地址：
github.com/MrXujiang/p…
我一直认为，在数据可视化与多维数据处理的场景中，表格始终是核心载体，但市面上多数表格组件往往局限于二维结构，难以满足复杂的多维数据展示、分析需求。
在实际的业务开发中，我们频繁遇到这类需求：
传统二维表格需要大量二次开发才能适配多维场景，且易出现代码冗余、性能卡顿等问题。
因此，我们决定从零开始，打造一款原生支持多维数据结构、轻量化且高度可定制的 Vue 版多维表格组件 ——pxcharts-vue。
核心特性我总结如下：
下面我会和大家分享一下我们这个项目使用到的技术方案和功能亮点，供大家参考研究。
先分享一下我们多维表格前端架构设计：
技术方案：
vue3-grid-layout-next 实现灵活的网格布局sortablejs 实现拖拽排序功能关键代码结构：
src/components/DataTable/
├── GridView.vue # 网格视图
├── KanbanView.vue # 看板视图
├── CalendarView.vue # 日历视图
└── TableConfig.vue # 表格配置
技术方案：
实现特点：
技术方案：
支持图表类型：
技术方案：
当然我们也实现了看板视图，大家可以开箱即用：
基本上完成了多维表格70%以上的功能，大家只需要基于 pxcharts-vue 的开源版本，进行二次开发，即可实现复杂的多维表格产品。pxcharts-vue 技术栈
| 技术 | 版本 | 说明 |
|---|---|---|
| Vue 3 | ^3.5.18 | 渐进式 JavaScript 框架 |
| TypeScript | ~5.8.0 | JavaScript 的超集，提供类型检查 |
| Vite | ^7.0.6 | 下一代前端构建工具 |
| Vue Router | ^4.5.1 | Vue.js 官方路由管理器 |
| Pinia | ^3.0.3 | Vue 3 状态管理库 |
| 技术 | 版本 | 说明 |
|---|---|---|
| TDesign Vue Next | ^1.16.1 | 企业级 UI 组件库 |
| ECharts | ^6.0.0 | 数据可视化图表库 |
| Tiptap | ^3.10.7 | 富文本编辑器框架 |
| Lucide Vue Next | ^0.548.0 | 精美的图标库 |
| 技术 | 版本 | 说明 |
|---|---|---|
| Axios | ^1.11.0 | HTTP 请求库 |
| Sortable.js | ^1.15.6 | 拖拽排序库 |
| Vue3 Grid Layout Next | ^1.0.7 | 网格布局组件 |
| Day.js | ^1.11.19 | 轻量级日期处理库 |
| NProgress | ^0.2.0 | 页面加载进度条 |
| Mitt | ^3.0.1 | 事件总线 |
| Lodash | ^4.17.21 | JavaScript 工具库 |
| 技术 | 版本 | 说明 |
|---|---|---|
| ESLint | ^9.31.0 | 代码检查工具 |
| Prettier | 3.6.2 | 代码格式化工具 |
| Vue DevTools | ^8.0.0 | Vue 开发调试工具 |
| unplugin-auto-import | ^20.1.0 | 自动导入 API |
| unplugin-vue-components | ^29.0.0 | 自动导入组件 |
# 克隆项目
git clone
# 进入项目目录
cd pxcharts-vue
# 安装依赖（推荐使用 pnpm）
pnpm install
# 或者
npm install
# 启动开发服务器
pnpm dev
# 访问
# 生产环境构建
pnpm build
# 预览构建结果
pnpm preview
# 代码检查
pnpm lint
# 代码格式化
pnpm format
后续我会写2篇详细的产品介绍和功能技术实现的文章，让大家更全面的了解pxcharts-vue这款开源多维表格项目，大家感兴趣可以学习研究一下。
如果你也在寻找一款开箱即用的多维表格解决方案，如果你相信数据协作还有更好的可能，欢迎来 GitHub 搜索 pxcharts-vue，或者访问我们的演示网站。你可以免费使用，可以贡献代码，也可以在留言区交流反馈。
pxcharts-vue 很多功能需要优化，欢迎大家共建。
作者：pxcharts创始人，前大厂架构师，坚信好的工具应该让人忘记工具本身的存在。
github地址：github.com/MrXujiang/p…
