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时生效 | -