数字化门户-表单
说明
- select类型默认设置有清除按钮
- switch类型支持使用defaultValue、value设值
- date、dateRange设值默认输出格式为YYYY-MM-DD,若设置 showTime 属性,输出格式为YYYY-MM-DD HH:mm:ss
备注: 日期、时间类型内部使用的组件是DatePicker2、TimePicker2组件
使用
banma-fusion-form
安装
npm install banma-fusion-form
API
BanmaForm
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
items | 表单项 | 否 | Item | ||
columns | 一行多少列 | 否 | Number/ResponsiveGrid | 1 | |
gutter | 列间距 | 否 | Number | 0 | |
useLabelForErrorMessage | 是否使用 label 替换校验信息的 name 字段 | 否 | Boolean | true | |
fullWidth | 单个 Item 中表单类组件宽度是否是100% | 否 | Boolean | true | |
parseName | 是否将name中.的字符串转换成对象,表单项items存在dynamic且未使用filed属性时必须设置true | 否 | Boolean | false | |
children | 自定义 | 否 | ReactNode |
其他属性参考Fusion Form
ResponsiveGrid
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
l | >=1200px 一行列数 | 否 | Number | ||
xl | >=1500px 一行列数 | 否 | Number | ||
span | 一行列数 | 否 | Number |
Item
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
label | label 标签的文本 | 否 | ReactNode | ||
name | 字段名 | 否 | String | ||
children | 自定义 | 否 | ReactNode | ||
type | 表单输入组件 | 否 | input,select,switch,checkox,radio,textArea,password,date,dateRange,timePicker,timePickerRange,numberPicker | input | |
showTime | 是否使用时间控件,type=date/dateRange生效 | 否 | Boolean | false | |
dataSource | type=select/checkbox/radio类型时数据源 | 否 | Array | ||
labelKey | 使用dataSource时,展示的label取值 | 否 | String | label | |
valueKey | 使用dataSource时,value key 值 | 否 | String | value | |
defaultValue | 初始值 | 否 | String/Number/Boolean | type=switch使用时也生效 | |
value | 当前值 | 否 | String/Number/Boolean | type=switch使用时也生效 | |
onChange | 表单输入组件改变时触发此事件 | 否 | Function | ||
placeholder | 输入提示 | 否 | String | ||
innerBefore | 文字前附加内容,type=input时支持 | 否 | ReactNode | ||
innerAfter | 文字后附加内容,type=input时支持 | 否 | ReactNode | ||
hint | 输入框后提示信息 | 否 | ReactNode | ||
hidden | 是否隐藏表单项 | 否 | Boolean | (item) => Boolean | |
addonAfter | 表单后面添加自定义内容 | 否 | ReactNode | ||
items | 表单项集合,表单项中渲染多个表单元素 | 否 | Item | v1.1.0 | |
showSeparator | 展示分隔符,存在items属性有效 | 否 | Boolean | v1.1.0 | |
gutter | 表单项之间间隔,存在items属性有效 | 否 | Number | 8 | v1.1.0 |
dynamic | 动态表单 | 否 | Boolean | false | v1.2.0 |
minNum | 动态表单最小数量,dynamic=true有效 | 否 | Number | v1.3.0 | |
maxNum | 动态表单最大数量,dynamic=true有效 | 否 | Number | v1.3.0 | |
span | 列宽度,使用方式同Grid.Col span | 否 | Number | v1.1.0 | |
mode | 选择器模式,type=select时支持 | 否 | single', 'multiple', 'tag' | single | |
typeProps | 默认提取表单输入组件常用属性,使用该属性扩展表单输入组件其他属性 | 否 | Object | type=checkbox/radio时,属性设置到Checkbox.Group,Radio.Group | |
showSearch | 展开后是否能搜索,type=select有效 | 否 | Boolean | ||
trim | 去除头尾空字符,type=input有效 | 否 | Boolean | ||
hasClear | 是否出现clear按钮,type=input有效 | 否 | Boolean | ||
minDate | 最小日期,type=date、dateRange有效 | 否 | Dayjs | ||
maxDate | 最大日期,type=date、dateRange有效 | 否 | Dayjs | ||
singleLine | 一行多列情况下(columns > 1),设置当前项是否单独一行显示 | 否 | Boolean |
其他属性参考Fusion Form.Item