前言
e-virt-table（edit virtual table）是基于
canvas实现以可编辑为主的表格组件如：复制、粘贴、选择器、填充等；您可以将其它作数据网格、微软 Excel 或 goole sheet 支持虚拟滚动、单元格编辑、数据校验等功能。
功能
目前项目刚发布
v1.0.0版本，也在积极维护迭代中，如果能满足你们的有帮助的请给项目来个star呗，当然有好的想法也可以和我交流一下，本人也比较听劝，哈哈~~~
- 支持拖拽表头宽度
- 支持拖拽行高高度
- 支持合并单元格
- 支持固定表头
- 支持多级表头
- 支持固定列
- 支持覆盖层即插槽（各种自定义显示）
- 支持合计
- 支持编辑
- 支持填充
- 支持选择器
- 支持复制粘贴
- 支持键盘事件
- 支持右键
- 支持数据校验
- 支持文字溢出提示
- 支持tree
- 支持虚拟滚动
- 支持多选
- 支持自定义格子样式
- 支持历史回滚
- 内置输入框且支持自定义编辑器（如数字编辑、时间选择、下拉选择器等）
- 纯TS库编辑可在HTML及各类框架（如 Vue 2、Vue 3、React 等）中使用
不足&待实现
如果您需要更多的功能的table如：过滤器、排序、stripe等请去使用真正的table组件，因为e-virt-table主要是可编辑为主考虑的更多的是用更少的代码实现编辑而且交互更便捷的场景所以会少些常见的table功能是正常的。当然如果您真的有很想很想需要的功能也可以向我提issue本人也比较听劝。
- 手机端支持度不高，手机端的填充，复制粘贴需要不同的交互逻辑及不同事件（在努力支持中）
- 不支持展开行(支持tree)
市面上已经有这么多表格组件，为什么还要造轮子呢？
市面上有很多优秀的表格库类似handsontable、ag-Grid、Vue-EasyTable、VxeTable、element、vant、的table等
原因
历史原因
项目几年前搭的且使用较旧的技术栈，基于 Vue2（这个库不限前端框架）
重要原因
- 好用的组件大多是收费的，而免费的往往功能有限。只要有虚拟滚动和编辑功能，几乎都需要付费。
- 市面上的表格组件大多数不支持复制粘贴和历史回滚填充等功能；即使有些支持填充和粘贴，也缺乏历史回滚。此外，回调和编辑方法不统一，使用起来非常不便。
个人原因
- 希望尝试使用
canvas实现，提升表格渲染性能，顺便巩固一下知识。 - 想做一个不局限于
Vue、Vue 3或React框架的组件，这样以后无论在哪个平台都能通用。 - 市面上的表格组件大多数不支持复制粘贴和历史回滚等功能；即使有些支持填充和粘贴，也缺乏历史回滚；此外，回调和编辑方法不统一，使用起来非常不便。
- 总而言之，言而总之我乐意(上面的库确实挺好用的，也解决我很多难点，特别是
Vue-EasyTable)
场景
下面我举例一下令我受尽折磨的或无语的我这几种场景,及用e-virt-table怎么解决。
场景A
这订单列表（有合并单）能不能支持5000条一页啊，大促期间我要看很多数据的呀，你看你看页面都卡住了！
戏精
- 我： 5000条？后端数据不得返回好几十M，能返回不？后端不得等很久？后端过来(来挡一下)！
- 后端：只要你能支持，我就可以！性能问题没问题的我们把数据放在es上了，查询快的！
- 产品：你看后端说没问题。
- 我：实在不行给你触底加载行不？
- 产品：不行，一卡一卡的！多了还是会崩呀！
- 我：......
解决方案
1. 以前解决方案：VxeTable、ag-Grid
- 这两个库都可以解决，两者都不会崩溃，但VxeTable有合并项的虚拟滚动也会卡顿，数据多了还是会空白一片一会才显示
ag-Grid中文文档写得有点乱，用起来有点困难； - 合并项数但凡超过可视区高度，滚动时合并项会莫名的消失显示异常（不过业务也能接受）。
- 合并项再加上多选中，处理逻辑加倍
- 列项虚拟滚动的情况性能下降严重
2. 用e-virt-table解决
- 默认是虚拟滚动，可以支撑 20w 以上数据（个人观点比体验好些）
- 目前只针对可视区进行动态合并，这样不会显示异常（当然也是有一定弊端，不过我觉得相对上面的方式好些）
示例图
2. 合并单元格多选例子配置config.CHECKBOX_KEY 内部处理合并选中项，操作更便捷
场景B
这表格为啥编辑的时候要弹窗啊，我要像excel那样文本编辑，这个弹窗很影响我的思路呀，而且我想从excel复制内容，你这表格能不能支持我批量粘贴我一个一个输入也太难了啊，还有这数据行能不能可以动态拉高呀，我要这个格子数据对应这张长图（操作习惯）
戏精
- 我：和excel操作？那么干嘛不直接在excel编辑好后直接导入表？
- 后端：？？？
- 业务：我要上传图,而且我们用excel就用的好好的干嘛要换？增加我的和工作量呢？一个个输入？
- 我：弹窗都能影响思路？后管理系统不都是弹窗出来编辑的嘛？
- 业务：你看excel这种操作就很舒服，或者你看一下飞书表格......演示中~~~~
- 我：......
- 业务：能不能支持数据行随便拉高呀，我想这行号对齐右边的图
- 我：......
解决方案
1. 以前解决方案：ag-Grid、Vue-EasyTable
- 都不能拖行高
- ag-Grid 选中及填充要付钱
Vue-EasyTable还不错整体都满足，就是如果只提交改变数据处理逻辑会复杂些
2. 用e-virt-table解决
当改变值变化时回调change事件会自动，不用关心撤销填充粘贴各种操作，反正只要改变数据就会统一回调change，把逻辑收敛。
场景C
新增数据一大堆的大格数据，不用导表形式，且一列数据有多种编辑形式（同列不同类型）
戏精
- 我：你的表格怎么变成列转行,同一列怎么有不同的编辑类型
- 产品：业务在excel表里面都是列转行，他们习惯了
- 我：新增为啥有新增那么多数据，直接弄个导入表不更简单嘛？
- 产品：这个数据导完数据要根据系统数据进行选择数据的，而且这个还要联动校验~~~
- 我：什么还要联动？还要校验？？，那校验能不能toast呀？逻辑方便些
- 产品：不行！我都不知道哪里错了
- 我：......
解决方案
1. 以前解决方案：ag-Grid、Vue-EasyTable
- 表格虚拟滚动套form-item 的情况下，检验规则是不行的，只能自己写样式处理，处理复杂
- 常用的表格是针对列要实现同列不同的类型，只能自定义显示列，处理复杂
- 在vue2中v-model input 性能简直没眼看，懂得都懂~就不展开了
2. 用e-virt-table解决
- 内置编辑器，针对格子拓展其他编辑类型例子，且内置方法可针对格子进行改变编辑类型
- 自定义校验器例子，内置async-validator写校验规则很方便，且校验时还能滚动导错误位置
亮点
用e-virt-table虽然时是基于
canvas表格，但是它覆盖层是dom,所以可以在canvas上显示dom元素如在表格上显示图片等。
计划&想法&结束语
- 目前项目刚发布
v1.0.0版本，也在积极维护迭代中，如果能满足你们的有帮助的请给项目来个star呗 - 有好的想法也可以和我交流一下，本人也比较听劝，哈哈~~~
- 目前本人只拓展了vue2和vue3的组件例子，react后续会拓展，具体请查看github
