方便开发者开发重复UI,减少网络请求以及页面组件堆叠的大量代码
特性
1.致力于组件的高内聚,低耦合,代码的复用性
2.快速开发通用的后台管理模块,全部组件基于antd的二次开发
3.布局灵活,自动响应式
4.若无必要,只需传入网络请求函数,自动加入请求队列,自动处理错误反馈
快速开始
import ListFormListTable from 'antd-jason'import connect from 'react-redux' const store = ListFormlistFormStore Component { thisstate = list: // 表单字段类型 thisformType = control: 1 label: '日结单号' id: 'odd' control: 2 label: '影院名称' id: 'cinemaName' control: 1 label: '影院Id' id: 'cinemaId' control: 2 label: '所属院线' id: 'cinemaChain' // 下拉选项的数据,每一项如果需要网络请求,传入对象,否则传入数组 thisselectData = null value: '影院1' name: '影院1' id: 1 value: '影院2' name: '影院2' id: 2 null ajax: service data: // 查询筛选项的结果 thissubmitData = ajax: submit } { this } // 绑定antd form api { // this.listForm = func } { // const { getFieldDecorator } = this.listForm return <div> <header>info</header> <ListForm = = = = = > </ListForm> </div> } const mapStateToProps = state console return form: statelistForm // export default PluginmapStateToProps nullPlugin // 要在路由中导入Provieder并传递store
api
-
ListForm组件
适用于根据筛选项的不同渲染表格数据的通用列表页,不用再花费大量精力收集表单值,完全配置式的写法
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
formType | 表单控件类型,1为Input,2为Select | 是 | |
showSelectOption | 自动发送ajax请求或者设置固定值给Select组件 | Array | 否 |
getTableData | 筛选查询按钮自动触发该回调,参数一为表格渲染所需的数据源 | function(list,callback) | 是 |
onSubmit | 筛选查询网络请求的参数,已经自动搜集了fieldsValue进行了提交,也可手动传入 | Object | 是 |
getFormApis | 如有必要调用antd的表单api,如setFieldsValue,validateFields等,可以通过该函数获取,将form对象传入回调 | function(apis) | 否 |
注意: 组件自身状态依赖于redux.获取组件原生的antd form api还可通过react-redux的connect将form api映射到props上,如
const mapStateToProps = state console return form: statelistForm // export default CommapStateToProps nullCom
此时就可以通过this.props调用组件内部api