2.0.15 • Published 3 years ago
react-antd-super-form v2.0.15
react-antd-super-form
Install
npm install --save react-antd-super-form
1.x 的版本 适用于 antd 3.x
2.x 的版本 适用于 antd 4.x
Usage
import React, { Component } from 'react';
import SuperForm, { Table, List, Form, Modal, ModalTable } from 'react-antd-super-form';
class Example extends Component {
render () {
return (
<SuperForm
// ...
search={{}}
table={{}}
/>
<Form
// ...
data={[]}
data={(form)=>[]}
/>
)
}
}
封装原则
- 维持原 antd 组件属性及方法不变
- 为了更方便的使用,增加或改变原 antd 一些组件的使用 'br', 'hidden', 'group', 'grid', 'space','list'
- 增加其它 Form.Item 元素 相应属性配置
- 优先级: visible > 'br','hidden', 'group', 'grid', 'space','list' > render > CType
基本结构
<SuperForm
formStyle={{
// 搜索区样式
}}
tableStyle={{
// 数据区样式
}}
type="table|list" //default table
search={
{
layout: 'horizontal'|'vertical'|'inline',
formLayout: {
labelCol: { span: 2 },
wrapperCol: { span: 14 },
},
data:[]
}
}
table={
{
// 扩展属性
// 是否开始时进行 action 进行调用
isInit:true|false,
// 数据请求的处理函数
action:func,
// 接口数据 返回值 res 与 组件内字段完成 映射, list 为数据数组, total 为 数据量, status 为接口是否正常
valueMap:(res) => {
return {
status: res.status,
dataSource: res.entry,
total: res.totalRecordSize
}
},
// 分页请求字段重命名[可选]
pageName:'',
pageSizeName:'',
// 附加参数
extraParams : ()=>{},
// 初始化数据量[可选]
total: 0,
// 初始化数据[可选]
dataSource:[],
// antd Table 固有属性
...prop
}
}
/>
search 字段配置
data = [
{
visible: true, // 默认 true, 组件是否渲染
label: 'xxx', // FormItem label 标签, 非必填
cType: 'xxxx', // ['br','hidden', 'group', 'grid', 'space','list'] + Antd Component
unbind: false, // 非输入组件 建议必填,
key: 'xxx', // 输入组件必填, 非输入组件可不填, 建议必填: key 值中 如果包含有逗号则此参数在提交时会被过滤
config: { // for
initialValue: 1
},
offset: true|false, //
render: (form)=>{},
renderFix: (item)=> item,
style: {
width: 100
},
placeholder: '请选择',
// for select | radio | radiobutton | slider | checkbox
options: [
{label: '订单号', value: 1}
{label: '手机号', value: 2}
]
// For button
text: '', // 按钮文案
bindSearch: true|false, // 自动绑定搜索事件
onClick(event, form),
// 子元素
innerHTML:()=>{},
child:<a></a>,
// for form item
formItem:{
labelCol: { span: 2 },
wrapperCol: { span: 14 },
}
// other
...
},
]
table 字段配置
type="list|table"
columns={columns}
rowKey={"id"}
pagination={{
// 配置同 antd
}}
// 扩展属性
// 是否开始时进行 action 进行调用
isInit={true|false}
// 数据请求的处理函数
action={func}
// 接口数据 返回值 res 与 组件内字段完成 映射, list 为数据数组, total 为 数据量, status 为接口是否正常
valueMap = {(res) => {
return {
status: res.status,
dataSource: res.entry||[],
total: res.totalRecordSize
}
}}
// 分页请求字段重命名[可选]
pageName = {}
pageSizeName = {}
// 附加参数
extraParams = {()=>{}}
// 初始化数据量[可选]
total={0}
// 初始化数据[可选]
dataSource={[]}
// antd Table 固有属性
{...prop}
License
MIT © bitores
2.0.15
3 years ago
2.0.14
3 years ago
2.0.13
3 years ago
2.0.12
4 years ago
2.0.11
4 years ago
2.0.10
4 years ago
2.0.9
4 years ago
2.0.8
4 years ago
2.0.7
4 years ago
2.0.6
4 years ago
2.0.5
4 years ago
2.0.4
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.36
4 years ago
1.0.35
4 years ago
1.0.34
4 years ago
1.0.33
4 years ago
1.0.32
5 years ago
1.0.31
5 years ago
1.0.30
5 years ago
1.0.29
5 years ago
1.0.28
5 years ago
1.0.27
5 years ago
1.0.26
5 years ago
1.0.25
5 years ago
1.0.24
5 years ago
1.0.23
5 years ago
1.0.22
5 years ago
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago