大家好，我是徐小夕。架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”

之前和大家分享了我实现的 pxcharts 多维表格编辑器和协同文档编辑器：

px-doc，一款开箱即用的协同文档编辑器

pxcharts多维表格ultra版：AI + 多维表，工作效率飙升！

最近在调研多维表格的技术实现，花了一天时间，手写了一个复杂表格的demo，用原生js实现，所以我们可以轻松集成到Vue或者React项目中，接下来就和大家分享一下它的技术实现和功能亮点。

功能亮点介绍

这款在线表格编辑器支持多条件筛选、分组展示、批量多选、图片上传与压缩、导出为 CSV/JSON、本地持久化、快捷键等特性。在 VTable 可用时启用增强型表格能力；在不可用时自动降级为简化版 HTML 表格，保障核心编辑体验。

1. 表格编辑能力

我们可以双击编辑表格单元，并支持拖拽列宽，表头排序等功能：

2. 表格单元格多选，框选，批量选择功能

我实现了类似excel表格的多选，框选单元格的功能，并支持表行的批量选择，演示效果如下：

3. 支持复杂分组功能

设置根据某个分组来切割表格之后，我们可以实现表格的展开收起子表的效果：

4. 支持多条件筛选功能

我们可以用多种组合筛选条件进行表格的数据筛选。

5. 动态添加行列的功能

对于表格列，我们可以动态地添加，并支持实时渲染。

6. 导出能力

目前我也实现了表格的数据导出能力，比如导出json，导出CSV格式的文件：

当然还有很多功能，后续我会持续和大家详细分享。

接下来来和大家分享一下我的技术选型和技术实现。

技术栈 编程语言: 原生 JavaScript (ES6+)、HTML5、CSS3 选择原因：零依赖易分发、可运行在任意现代浏览器；ES6 提供、模块化与更清晰的语义。数据表格组件: @visactor/vtable（CDN 按需加载）选择原因：高性能网格、内置编辑/选择/排序/主题支持；当加载失败时，项目提供简化版替代实现。 UI/图标: Font Awesome 6（CDN）、原生 CSS（styles/）选择原因：快速构建现代化 UI；无框架约束、样式可控。 数据持久化: 浏览器 localStorage 选择原因：纯前端离线可用、无需后端依赖。 文件处理: File API、Canvas（图片压缩）、Blob/URL API（下载） 选择原因：原生能力满足图片压缩与导出需求。 开发与运行: 无构建依赖，任意静态服务器即可运行（Python/Node/PHP 内置服务器）。

代码结构dotable/ ├─ index.html               # 入口与页面结构 ├─ styles/                  # 样式（主样式/表格/组件/模态） ├─ js/ │  ├─ app.js                # 应用协调、生命周期、快捷键、导出/保存 │  ├─ tableManager.js       # VTable 增强表格管理 │  ├─ simpleTableManager.js # 简化 HTML 表格实现（降级） │  ├─ filterManager.js      # 多条件筛选（条件动态表单/应用/清除/导入导出） │  ├─ groupManager.js       # 分组（VTable/简化两套渲染策略） │  ├─ imageManager.js       # 图片上传/压缩/预览/回填/导出 │  ├─ multiSelectManager.js # 框选/多选与批量操作 │  └─ utils.js              # 通用工具集 ├─ test*.html/js            # 测试与演示页面/脚本 └─ README.md                # 技术文档

整个技术实现我采用的是js的类，并加持了插件化系统架构，如果大家想学习js架构和算法设计，这个项目是非常不错的选择。

如果你有好的建议和想法，也欢迎随时交流反馈～