今天继续聊聊多维表格编辑器。
之前和大家分享了我花3个月编写的代码量接近 1w 行的多维表格，也收到了非常多粉丝的反馈。
演示地址：mute.turntip.cn
很多朋友想让我实现一版Vue的多维表格，于是我花了一周时间， 基于我之前设计多维表格的经验，终于写了一版，上图的演示动画就是Vue版本的多维表格。
说实话，用Vue写真的很痛苦，当然并不是因为框架本身不好用， 而是为了保证代码的架构优雅，以及Vue实现的渲染性能问题，其实需要考虑很多细节上的设计。同时，多维表格因为其自身结构上的复杂性，我们需要满足诸如下面的功能：
- 大数据量的渲染性能
- 表格结构的不确定性
- 表格字段的动态可配置性（比如添加字段，设置字段格式， 字段校验等）
- 行和列的排序
- 列拖拽调整宽度问题
- 表格的数据结构映射设计
当然还有很多业务上可扩展的需求，也需要在设计多维表格的整个架构上做思考。所以我花了大概3天时间考虑上面的问题，并熟悉Vue高级API，力求让代码足够优雅和具有先进性。好在最终实现了Vue版本，接下来就和大家分享一下具体的实现细节。大数据渲染能力支持------虚拟列表实现
目前列表的渲染我采用了虚拟滚动的方式，以便可以支持海量数据的加载，具体的使用方式如下：
VirtualRow 就是我封装的虚拟行组件，实现原理就是利用可视高度和行的高度计算下次渲染的时机，同时减少一次加载大量 dom 节点。我会用一个空白占位符来监控滚动高度变化：
感兴趣的朋友可以参考一下。
多维表格的行和列拖拽排序
在支持虚拟滚动之后， 表格的行和列再支持拖拽排序功能， 同时要保证每一个单元格都可编辑，这个需要非常多的设计考量和模块化拆分。接下来分享一下行和列的拖拽核心实现。
列排序拖拽的功能：
多维表格的单元格编辑功能
单元格编辑需要支持不同类型的编辑能力，同时大家还可以基于自身需求拖拽更多编辑类型。目前支持的表格编辑类型有：
- 文本框
- 下拉列表
- 日期框
- 复选框
- 标签
为了更好的维护性，我将单元格单独封装成了 CellRender 组件，以便更好的扩展和维护。多维表格的字段管理功能
字段管理是多维表格的核心能力之一，我们可以动态新增字段，删除字段，对字段进行二次编辑，排序等，同时还能设置校验规则：
字段管理功能我也花了很多时间来设计，最终采用了优雅的IOC模式来实现了数据的实时同步。
状态管理我统一维护在了 store.ts 文件中，同时使用 vue coder 们最熟悉的pina状态库。多维表格的性能监控面板
之所以设计这个功能，是为了实时监控多维表格的性能，并统计各项指标数据。多维表格的数据导出功能我们可以把多维表格数据一键导出为json，大家可以方便的分析json数据，并基于多维表格数据进行可视化的图表渲染和分析。这里和大家分享一下我设计的多维表格的数据结构：
好啦，今天就分享到这，如果大家对多维表格感兴趣，也欢迎随时和我交流。
演示地址：pxcharts.com