![793bdc896f9c43eee78261a7036f915e.png](https://i-blog.csdnimg.cn/blog_migrate/76ea7744cf5a311c075a78ff59038a11.png)
可编辑表格是 ProTable 中呼声比较高的功能,在项目中虽然使用频率不高,但是实现起来难度确不小。所以 ProTable 在完成了架构升级后,就开始着手可编辑表格的开发,现在它终于来了。
♀️ 默认好看的样式
作为了 Ant Design 的衍生作品,我们对 EditableTable 的样式进行了预设,我们很容易就能做出这么好看的可编辑表格。同时我们提供了顶部添加和底部添加两种模式,用于适应不同的场景。我们可以做到默认好看,同时默认好用。
![a503f7ad8d8b600d2f8642dc8d4f0453.png](https://i-blog.csdnimg.cn/blog_migrate/d2b597f7048c1ba8b534e2f7f569eeb5.jpeg)
为了改善在狭窄空间内的错误提示,我们重写错误信息的展示方式,使用 Tooltip 类似的方式来展示错误。当然为了防止抖动,我们也重写了Form 的样式使其更加的适合狭窄的输入区域,这样在使用 EditableTable 时并不会产生明显的跳动感,感觉非常顺滑。
![172e8e1e49ddfc5684de0209f03a58eb.png](https://i-blog.csdnimg.cn/blog_migrate/33bdae961b7b95fc509dbdf696c1346c.png)
默认好用的 API
EditableTable 定义了一套和 Ant Design 相同的 API , 如果你是熟练的 Ant Design 使用者在使用时会感觉到非常的熟悉。为了方便大家使用 EditableTable
修改了 value
和 onChange
,只要放到 Form 中就会像 Input
一样自动绑定数据。
除了 value 和 onChange 我们还提供了 editable 来自定义编辑表格的行为,包括是否支持多行编辑,当前正在编辑行的 key 等,基本可以满足所有的开发需求。
![5dd1cb694dfc3edd3f294dba097ce09c.png](https://i-blog.csdnimg.cn/blog_migrate/1425fd8ecbc52b9057d41a02c0d1c999.jpeg)
如何使用?
editable 编辑配置
市面上的可编辑表格是非常多的,但是很多使用起来非常麻烦,Table 的表单区域虽然小但是输入控件却不简单,常见的文本,下拉框,数组,日期甚至有时候还会有麻烦的日期区间等,那么 EditableTable 是如何解决这个问题的?
EditableTable 是基于 ProTable 实现的,在 ProTable 中我们是有查询表单这个功能的,通过配置不同的 valueType
就可以生成不同的查询表单,可编辑表格也是使用了同样的 API ,下图是 ProTable 支持的所有日期类的 valueType
。