可编辑表格组件ReEditTable
组件实现基于
Vue3
+Element Plus
+Typescript
,同时引用vueUse
+lodash-es
+tailwindCss
(不影响功能,可忽略)
基于自封的分页表格组件ReTable进行的功能扩展,在
ReTableColumn
配置的基础上,结合ReForm
一些相同的表单配置项,一同实现可编辑功能。支持多种编辑表格交互方式,如单个单元格编辑,整行编辑,或者全部行编辑;支持单元格校验,使用ElForm
相同校验规则的配置项进行校验;同时,表格也支持滚动、分页功能。
校验方式支持整个表格校验,自动跳转首行校验失败的位置(分页也支持),也支持单行数据校验、单个单元格数据校验这三种校验方式。
由于行渲染表单控件未使用ElForm进行包裹,无法直接通过ElForm自带的校验功能进行数据校验,主要基于自己写的async-validate方法进行数据校验。目前只针对常见的rules配置规则进行遍历校验,如果不满足您的需求,你可以直接自己实现校验方法后替换方法即可。
可编辑表格不仅支持全量数据直接进入编辑,还支持单元格单独编辑或者单行单独编辑。【推荐】单行编辑,加上分页功能,能够解决大部分可编辑表格输入卡顿问题。
思路
基于ReTableColumn的配置项扩展,增加了一些同ReFormItem相似的配置项,利用ElTableColumn的formatter或者renderCell自定义渲染方式,动态渲染表单控件,因此需要基于配置以及编辑状态进行自定义渲染函数的构造。
增加了required、comp、childComp、rules、props等渲染表单控件的字段即可,原先已经支持options了(同ReFormItem用法一致,可以用于渲染一些下拉、单选钮组、多选框组),自带的slot插槽也可用于自定义表单控件渲染,同时还将当前行的编辑状态通过作用域插槽返回,可以用于控制自定义展示内容。
处理完表单控件渲染,需要区分一些交互方式,目前支持整个表格可编辑、单行编辑、单个单元格编辑等控制,同时单行编辑还区分自定义控制还是直接双击控制,单元格编辑只支持双击控制。
目前单行编辑(edit-trigger=row)、单个单元格编辑(edit-trigger=cell)采用鼠标左键双击开启编辑/关闭编辑的交互方式,如果使用自定义单行编辑(edit-trigger=custom),需要使用操作列来控制,可以直接使用自带的操作列也可以自定义,提供的expose方法足够自己控制编辑状态。
需要按列配置收集校验规格,通过数据逐行遍历校验,行数据基于列配置收集的校验规格逐个字段进行校验,因此可以清晰的构造三种校验方式:全量数据、单行、单个单元格。
除了上述最基本的功能处理外,还需要处理各种状态缓存,如编辑状态(区分按行、还是按单元格)、原始数据缓存(用于还原)、校验结果缓存(用于展示校验失败信息),既要支持增加、删除、判断是否存在等功能,还需要增加索引更新操作(如果删除某一行之后,需要更新受影响的缓存数据,否则会行渲染会出错)
其他一些功能点:自定义操作列的定义渲染,内置新增按钮的展示(支持页脚和头部两种方式)
难点
- 索引的理解:如果是滚动表格,ElTable返回的索引是实际的数据索引,但如果是分页表格,ElTable返回的索引实际是当前页的索引,要正确数据响应,需要进行索引的转换,因此源码中存在大量的索引转换处理(normalizeIndex)。
- 各种状态缓存维护
- 单元格的自定义渲染函数构造
- 提供rules规则校验方法
特殊点
- ElTable双击事件,未返回索引信息,因此需要自行获取索引信息,目前采用两种方式:如果配置rowKey,则通过rowKey从数据中获取数据索引,如果是分页情况需要根据页码进行当前页的索引转换;如果没有rowKey,则通过DOM操作获取当前tr所在父节点的索引位置,注意,DOM获得的索引是渲染的索引(当前页的索引),