未分類
10 4 月 2020

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

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

資深大佬 : nnnToTnnn 62

最近发现 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/

大佬有話說 (5)

  • 資深大佬 : Spoter

    现在有 v4 了

  • 資深大佬 : SolidZORO

    v4 从 alpha 用到 rc，用了很长一段时间，基本上除了 Icon 改动大一点，没有明显的 breakchange，非常难得。form 也已经可以通过 ref 和 useImperativeHandle 复用了，大满足！

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

    所以，主现在就可以开始做兼容 v4 的版本了哈哈哈哈哈哈。

  • 資深大佬 : ccsulzf0627

    个人觉得表格方面 ag-grid 真的是做的最好的，除了收费。。。

  • 主 資深大佬 : nnnToTnnn

    @SolidZORO 其实主要是为了支持复杂的需求，例如行编辑，单元格编辑等等一些。本来打算用 ag-gird 但是 ag-grid 收费啊。 难受。。。。 收费用户还好很满足，开源版本就有点忧伤了。

  • 主 資深大佬 : nnnToTnnn

    @SolidZORO 打算今年年过完了，打算就开始支持 v4 了 =。=