本文主要是介绍可编辑表格组件ReEditTable（API），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
可编辑表格组件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获得的索引是渲染的索引（当前页的索引），
这篇关于可编辑表格组件ReEditTable（API）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
