摘要：大家好，我是徐小夕。架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”
大家好，我是徐小夕。
架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”
之前和大家分享了我实现的 pxcharts 多维表格编辑器和协同文档编辑器：
px-doc，一款开箱即用的协同文档编辑器
pxcharts多维表格ultra版：AI + 多维表，工作效率飙升！
最近在调研多维表格的技术实现，花了一天时间，手写了一个复杂表格的demo，用原生js实现，所以我们可以轻松集成到Vue或者React项目中，接下来就和大家分享一下它的技术实现和功能亮点。
我们可以双击编辑表格单元，并支持拖拽列宽，表头排序等功能：
我实现了类似excel表格的多选，框选单元格的功能，并支持表行的批量选择，演示效果如下：
设置根据某个分组来切割表格之后，我们可以实现表格的展开收起子表的效果：
我们可以用多种组合筛选条件进行表格的数据筛选。
对于表格列，我们可以动态地添加，并支持实时渲染。
目前我也实现了表格的数据导出能力，比如导出json，导出CSV格式的文件：
当然还有很多功能，后续我会持续和大家详细分享。
接下来来和大家分享一下我的技术选型和技术实现。
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架构和算法设计，这个项目是非常不错的选择。
如果你有好的建议和想法，也欢迎随时交流反馈～
来源：趣谈前端
