0.0.7 • Published 5 years ago
sc-powerful-form v0.0.7
sc-powerful-form
介绍
基于 Ant Design ,参考 hermes-react 实现的 可增加的模块 的组件
初衷
由于项目里大量用到了可增加行的表格组件,先是使用了hermes-react组件库提供的可增加行的表格组件。
在使用 hermes-react 的 AddableRowTable 组件过程中也发现了一些问题:
- hermes-react 提供的 AddableRowTable 组件默认会显示操作栏,而且没法隐藏, 而我期望的是可以自己控制操作栏的显示与否;
- 组件设置
disabled
禁用,但是配置了formFieldProps
的单元格disabled
属性却 没有生效; formFieldProps
配置在生效时,initialValue
获取值错误的问题,这个问题提给了 hermes-react 的维护者,并且他已经在最新的1.8.4版本中修复了- 表格默认回显之后,如果手动调用
setFieldsValue
重新设置默认值,会引发回显出错的bug。此问题与 hermes-react 的内部实现有关。 - hermes-react 的 AddableRowTable 表格组件是基于 antd 的 Row和Col组件渲染的,支持响应式,但是同时,最多也只能有24格,当表格需要填内容很多时,每一个单元格就会变得很窄。
以上几个问题虽然通过修改源码可以解决,但是个人感觉这个组件以后可能用到的地方比较多,每次都改下源码还是有点麻烦, 索性就基于 hermes-react ,自己写了一个这样的组件,并且也修复了以上前四个问题。
第五个问题正在尝试解决中...敬请期待
版本
安装
npm install sc-powerful-form --save
yarn add sc-powerful-form
使用
import { AddableRow, AddableRowTable, AddablePanel } from 'sc-powerful-form'