牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!

今天继续聊聊多维表格编辑器。

之前和大家分享了我花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

相关推荐
0wioiw05 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖9 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
武昌库里写JAVA9 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
小飞悟32 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖35 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript