[分享] Ant Design of React 的表格和表单组件分享。
nnnToTnnn · jhoneybee · 2020-01-21 09:28:59 +08:00 · 3105 次点击这是一个创建于 1760 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近发现 Ant Design v3 的表格和表单操作起来不是很方便，所以就简单的封装了一下，做了一个很简单的工具类。
拥有以下功能
- 实现分页（其实就是表格自带的分页功能）
- 实现行编辑（也就是官网例子里面的行编辑，甚至 css 样式都一样）
- 实现单元格编辑（没错我就是白嫖的官网上的 demo /doge ）
- 实现表格的行编辑校验
- 实现语义化定义 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/
 |
1
Spoter 2020-01-21 11:47:43 +08:00
现在有 v4 了
|
 |
2
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 的版本了哈哈哈哈哈哈。 |
 |
3
ccsulzf0627 2020-01-21 16:56:16 +08:00
个人觉得表格方面 ag-grid 真的是做的最好的，除了收费。。。
|
 |
4
nnnToTnnn OP @SolidZORO 其实主要是为了支持复杂的需求，例如行编辑，单元格编辑等等一些。本来打算用 ag-gird 但是 ag-grid 收费啊。 难受。。。。 收费用户还好很满足，开源版本就有点忧伤了。
|
Select Language