[分享] Ant Design of React 的表格和表单组件分享。

2020-01-21 09:28:59 +08:00
 nnnToTnnn

最近发现 Ant Design v3 的表格和表单操作起来不是很方便,所以就简单的封装了一下,做了一个很简单的工具类。

拥有以下功能

  1. 实现分页(其实就是表格自带的分页功能)
  2. 实现行编辑(也就是官网例子里面的行编辑,甚至 css 样式都一样)
  3. 实现单元格编辑(没错我就是白嫖的官网上的 demo /doge )
  4. 实现表格的行编辑校验
  5. 实现语义化定义 Form 表单

启动预览表格表单

npm install 
npm run start 

# or

yarn 
yarn start 

即可预览表格表单,编辑源码下的 .ushio.tsx,即可看到对应的例子


github 地址:

https://github.com/Kotomi-Team/kotomi-ui


Q&A

Q: 那为什么不用 handsontable 或 ag-grid ?

A:灵魂拷问,我陷入了深深的沉思。


Q: 如何找到对应的文档说明?

A: 源码采用 typescript 可很好查看对应的属性,其次一般组件目录下都拥有一个 md 来进行说明(但没有源码新)


Q: 这个组件成熟吗?

A: 不成熟,等待项目验证


Q: 支持懒渲染吗?

A: 不支持,想着白嫖 Ant Design 的 v4 版本。


Q: 支持 Ant Design v4 吗?

A: 暂时不支持。因为目前 v4 尚未正式发布。


希望能白嫖一个 star ~~ =。= ~~


PS: Ant Design 要发布 v4 版本的,这个版本改变了很多很多,有意的大家可以点击以下连接了解

https://next.ant.design/

2976 次点击
所在节点    分享创造
5 条回复
Spoter
2020-01-21 11:47:43 +08:00
现在有 v4 了
SolidZORO
2020-01-21 14:48:33 +08:00
v4 从 alpha 用到 rc,用了很长一段时间,基本上除了 Icon 改动大一点,没有明显的 breakchange,非常难得。form 也已经可以通过 ref 和 useImperativeHandle 复用了,大满足!

另外就是,table 这块,rc-table 简单用用还是可以的,如果有比较复杂的需求,还是得 ag-grid…… 商业级别的 lib 可以覆盖 99% 你想得到和想不到的需求。

所以,楼主现在就可以开始做兼容 v4 的版本了哈哈哈哈哈哈。
ccsulzf0627
2020-01-21 16:56:16 +08:00
个人觉得表格方面 ag-grid 真的是做的最好的,除了收费。。。
nnnToTnnn
2020-01-22 14:55:18 +08:00
@SolidZORO 其实主要是为了支持复杂的需求,例如行编辑,单元格编辑等等一些。本来打算用 ag-gird 但是 ag-grid 收费啊。 难受。。。。 收费用户还好很满足,开源版本就有点忧伤了。
nnnToTnnn
2020-01-22 15:06:37 +08:00
@SolidZORO 打算今年年过完了,打算就开始支持 v4 了 =。=

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/639587

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX