fzui-designAppearance
表单 Form
配置生成表单 当前所展示 label 信息 为表单 type 类型
基础使用
搜索
响应式
自定义提交按钮组
自定义表单组件
formRef 使用
逻辑处理
数据回显
属性
如需查看 Form 属性，请参考：arco-design
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| config | 表单基础配置 | Object | {} |
| list | 组件的配置 | Array | [] |
config 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| layout | 表单布局 | String | horizontal | horizontal |
| labelAlign | 标签的对齐方向 | String | left, right | right |
| size | 组件大小 | String | mini, small, medium, large | medium |
| submitText | 自定义提交按钮文本 | String | - | 提交 |
| resetText | 自定义重置按钮文本 | String | - | 重置 |
| btnPosition | 底部按钮位置 | String | start, center, end | start |
| isHiddenButton | 是否隐藏底部按钮 | Boolean | true, false | false |
| 其他 | 参考 <form> Props | - | - |
list[item] 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 组件类型 | String | Input, InputNumber, InputPassword, Textarea, Select, Cascader, Checkbox, Radio,DatePicker, TimePicker, RangePicker, YearPicker, MonthPicker,QuarterPicker, WeekPicker, TreeSelect, Tree, Slider, Rate, Upload | - |
| model | 唯一key值 | String | any | - |
| label | 标签 | String | any | - |
| tooltip | 提示 | String | - | - |
| noStyle | 是否去除样式 | Boolean | true, false | false |
| hidden | 隐藏 | Boolean | true, false | false |
| hideLabel | 是否隐藏标签 | Boolean | true, false | false |
| col | 栅格布局 | Object | 参考 <col> Props | {span: 24} |
| options | 组件属性 | Object | 参考 对应组件属性<component> Props | - |
| tooltip | 提示 | String | - | - |
form slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| submit | 自定义底部提交按钮 | - |
list[item]slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
[model] | 自定义表单组件 | - |
JSON Schema
{
config: {
layout: 'horizontal',
labelAlign: 'right',
size: 'medium',
autoLabelWidth: true,
disabled: false
},
list: [
{
type: 'Input',
model: 'name',
label: 'Input',
col: { span: 8 },
// extra: '这是额外信息',
// help: '这是帮助信息',
options: {
value: '鹏歌1',
placeholder: '请输入',
allowClear: true,
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'InputNumber',
model: 'age',
label: 'InputNumber',
col: { span: 8 },
options: {
value: 18,
placeholder: '请输入',
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'Select',
model: 'select',
label: 'Select',
col: { span: 8 },
options: {
value: '',
placeholder: '请选择',
options: [
{
value: 'bj',
label: 'Beijing'
},
{
value: 'sh',
label: 'Shanghai'
},
{
value: 'gz',
label: 'Guangzhou'
},
{
value: 'cd',
label: 'Chengdu'
}
],
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'Cascader',
model: 'cascader',
label: 'Cascader',
col: { span: 8 },
options: {
value: '',
placeholder: '请选择',
options: [
{
value: 'beijing',
label: 'Beijing',
children: [
{
value: 'chaoyang',
label: 'ChaoYang',
children: [
{
value: 'datunli',
label: 'Datunli'
}
]
},
{
value: 'haidian',
label: 'Haidian'
},
{
value: 'dongcheng',
label: 'Dongcheng'
},
{
value: 'xicheng',
label: 'Xicheng',
children: [
{
value: 'jinrongjie',
label: 'Jinrongjie'
},
{
value: 'tianqiao',
label: 'Tianqiao'
}
]
}
]
},
{
value: 'shanghai',
label: 'Shanghai',
children: [
{
value: 'huangpu',
label: 'Huangpu'
}
]
}
],
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'Checkbox',
model: 'checkbox',
label: 'Checkbox',
col: { span: 8 },
options: {
value: [],
placeholder: '请选择',
options: [
{
value: 'Music',
label: '音乐🎵'
},
{
value: 'billiards',
label: '台球🎱'
},
{
value: 'video',
label: '电影🎬'
},
{
value: 'games',
label: '游戏'
}
],
rules: [
{
type: 'array',
minLength: 2,
message: '必须选择两项'
}
]
}
},
{
type: 'DatePicker',
model: 'datepicker',
label: 'DatePicker',
col: { span: 8 },
options: {
value: '',
placeholder: '请选择日期',
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'TimePicker',
model: 'timepicker',
label: 'TimePicker',
col: { span: 8 },
options: {
value: '',
placeholder: '请选择时间',
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'RangePicker',
model: 'rangepicker',
label: 'RangePicker',
col: { span: 8 },
options: {
value: [],
rules: {
trigger: 'blur',
message: '必填',
required: true
}
}
},
{
type: 'YearPicker',
model: 'yearpicker',
label: 'YearPicker',
col: { span: 8 },
options: {
value: ''
}
},
{
type: 'QuarterPicker',
model: 'Quarterpicker',
label: 'QuarterPicker',
col: { span: 8 },
options: {
value: ''
}
},
{
type: 'MonthPicker',
model: 'monthpicker',
label: 'MonthPicker',
col: { span: 8 },
options: {
value: ''
}
},
{
type: 'WeekPicker',
model: 'weekpicker',
label: 'WeekPicker',
col: { span: 8 },
options: {
value: ''
}
},
{
type: 'Radio',
model: 'radio',
label: 'Radio',
col: { span: 8 },
options: {
value: '',
options: [
{
value: 'radio one',
label: 'Radio One'
},
{
value: 'radio two',
label: 'Radio Two'
}
],
rules: [{ match: /one/, message: 'must select one' }]
}
},
{
type: 'TreeSelect',
model: 'treeSelect',
label: 'TreeSelect',
col: { span: 8 },
options: {
value: '',
placeholder: '请选择',
options: [
{
key: 'node1',
title: 'Node1',
children: [
{
key: 'node2',
title: 'Node2'
}
]
},
{
key: 'node3',
title: 'Node3',
children: [
{
key: 'node4',
title: 'Node4'
},
{
key: 'node5',
title: 'Node5'
}
]
}
]
}
},
{
type: 'Switch',
model: 'switch',
label: 'Switch',
col: { span: 8 },
options: {
value: false,
rules: {
required: true
}
}
},
{
type: 'Slider',
model: 'slider',
label: 'Slider',
col: { span: 8 },
options: {
value: 10
}
},
{
type: 'Rate',
model: 'rate',
label: 'Rate',
col: { span: 8 },
options: {
value: 2,
count: 5
}
},
{
type: 'Upload',
model: 'upload',
label: 'Upload',
col: { span: 8 },
options: {
value: []
}
}
]
}