根据Antd的Form进行二次开发的表单

在写项目的时候经常会用到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做些入口操作处理，也就是检查一下数据类型，赋初始值之类的操作了。

虽然实现的时候有些麻烦，但是后面用的时候很爽啊，使用十几分钟时间写个配置，表单就生成好了，表单需要改动的时候直接改配置文件就可以，不用直接去调整组件的位置。

嗯，具体代码正在写的过程中。。。写完会分享出来。
当然，网上肯定有很多这样的组件依赖，可以下载下来用，我整理到了也会发出来。