在写项目的时候经常会用到Form表单,于是乎就机械的使用Antd的Input,Select。。。等组件按照需求拼出来一个form表单。表单输入完毕后,大部分都是【查询】,【重置】,【提交】等操作。机械性的工作有很多。所以呢,写多了就开始想偷懒了,我想了一个类似于Form表单组合的组件,把我常用的表单组件整理到一个EasyForm的组件里,只需要给EasyForm表单传递formOptions,里面是Form表单的配置信息,然后使用列表把formOptions渲染出来,另外在props里加一些form表单的监听事件。
下面是我的大概实现思路
大概就是formOptions里面配置一下每一行有哪些Form组件,每一个Form组件占位多少,label占位多少,wrap占位多少,剩下就是按照Antd的Form表单参数,配置一些常用的表单参数。EasyForm根据配置信息组合表单;
const formOptions = [[{// 第一行是<select/><input/><datepicker/>
type: 'select',
label: '表单label',// 表单label
name: 'Form',
key: 'FormId', // key值如果不设置使用name
dataset: [{ value: '1', label: '测试1', }, { value: '2', label: "测试2" }],// 数据项
rules: [{// 校验规则
required: true,
message: '这是必填的'
}],
colSpan: '8',// 表单整体占位
labelCol: {
span: 6
}, // label的占位
wrapperCol: {
span: 18
},// form表单的占位
extra: {
multiple: true,
prefix: ''
},
disabled: false
}, {
type: 'input',
label: '表单2',// 表单label
name: 'form2',
rules: [{// 校验规则
required: true,
message: '这是必录的'
}],
validate: {
},
placeholder: '请输入',
colSpan: '8',// 表单整体占位
labelCol: {
span: 6
}, // label的占位
wrapperCol: {
span: 18
},// form表单的占位
}, {
type: 'datepicker',
label: '日期',
name: 'date',
colSpan: "8",
labelCol: {
span: 4
}, // label的占位
wrapperCol: {
span: 10
},// form表单的占位
}],
[ // 第二行是 <treeselect/><button>搜索</button><button>重置</button>
{
type: 'treeselect',
name: 'treeselect',
colSpan:'16',
label:'下拉树',
labelCol: {
span: 3
},
dataset:[]
},{
type:'buttonGroup',
colSpan:'6',
btns:[{
label:'查询',
key:'search',
type:'primary',
className:'easy-search',
disabled:false
},{
label:'重置',
key:'reset',
type:'ghost',
disabled:true
}]
}
]
]
生成的form表单截屏如下:
datasouce是form表单的value,在使用React.forwardRef把EasyForm组件的ref属性,转发给Antd原生Form表单;还有就是一些form表单的校验,事件监听和状态提升,以及针对formOptions做些入口操作处理,也就是检查一下数据类型,赋初始值之类的操作了。
虽然实现的时候有些麻烦,但是后面用的时候很爽啊,使用十几分钟时间写个配置,表单就生成好了,表单需要改动的时候直接改配置文件就可以,不用直接去调整组件的位置。
嗯,具体代码正在写的过程中。。。写完会分享出来。
当然,网上肯定有很多这样的组件依赖,可以下载下来用,我整理到了也会发出来。