0.0.5 • Published 4 years ago
fe-boltzmann v0.0.5
fe-boltzmann
基于ant design封装常用工具组件
JSON配置的表单组件 BaseForm 配置示例
使用
import React from 'react';
import { BaseForm } from 'fe-boltzmann';
export default class BaseFormDemo extends React.Component {
render () {
return (
<BaseForm
formItem={[
{
dataType: 'input',
dataKey: 'name',
label: '姓名',
defaultValue: '',
placeholder: '',
rules: 'required',
showRule: ''
},
{
dataType: 'input',
dataKey: 'age',
label: '年龄',
defaultValue: '',
rules: 'required|number|max:1000|min:0|len:1,2',
showRule: 'name eq 张三'
},
]}
/>
)
}
}
API
属性&方法 | 类型 | 描述 | 示例数据 |
---|---|---|---|
formItem | Array | 表单项 | [{dataType: 'input',dataKey: 'name',label: '姓名'},{dataType: 'input', dataKey:'age',label: '年龄'}] |
formData | Object | 表单填充数据 | {name:"张三",age:15} |
dataSource | Object | 表单源数据 | {position: [{value:1, label: "P1"},{value:2, label: "P2"}]} |
uiConfig | Object | 表单布局 | formItemLayout、groupItemLayout |
onSubmit | Function | 提交回调 | - |
formItem
属性 | 描述 | options |
---|---|---|
dataType | 类型 | input、select、textarea、radio、group、buttons、custom |
dataKey | 表单key | - |
label | label | - |
defaultValue | 表单默认填充(不存在formData数据时生效) | - |
placeholder | 提示描述 | - |
rules | 校验规则,例如:{rules: 'required|len:0,100'} 使用|分割 | required、email、mobile、id_card、yuan、len、max、min |
showRule | 表单显示规则,例如:{showRule: 'userName eq 张三 | age gt 15'} | eq(等于)、gt(大于)、lt(小于)、uneq(不等于) |
validator | 自定义校验方法,参考antd使用规则 第四个属性为表单当前所有数据 方便校验 | validator:(rule, value, callback, params){} |
element | 自定义元素,当dataType=custom时生效 | - |