字段
字段配置参考（可直接复制使用）
字段介绍
"fields": { // 所有字段
fieldName: { // 字段标识
model: "fieldName", // 字段标识
type: "input", // 字段在表单中的展示类型
wrapper: { // 表单中包裹字段的 FormItem 的配置
label: "字段名称"
},
customize: { // 字段的表单配置，对应文档中字段的 API
allowClear: true,
placeholder: "请输入段名称"
},
decorator: { // 装饰器，默认值（initialValue）、校验规则都在这里，对应字段在表单中的 decorator 配置
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {} // 部分组件封装后的自定义配置项，例如文件上传组件的 limit（上传数量限制） 和 size（文件体积限制，单位 M）
},
输入框-input
fieldName: {
model: "fieldName",
type: "input",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称"
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {
mode: "" // 搜索栏显示搜索图标需要配置mode为search，回车或点击图标会触发搜索
}
},
文本框-textarea
fieldName: {
model: "fieldName",
type: "textarea",
wrapper: { //
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称"
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
自动补全-autoComplete
fieldName: {
model: "fieldName",
type: "autoComplete",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称",
filterOption: true,
dataSource: [
{
value: "健康",
text: "健康"
}
]
},
decorator: {
initialValue: decorator,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
数字输入框-number
fieldName: {
model: "fieldName",
type: "input",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称"
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
静态数据下拉选择器-select
fieldName: {
model: "fieldName",
type: "select",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称"
options: [
{
value: 1,
label: "下拉框1"
},
{
value: 2,
label: "下拉框2"
}
]
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
动态态数据下拉选择器-select
fieldName: {
model: "fieldName",
type: "select",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称"
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {
dynamic: true, // 是否是动态的
dynamicKey: "enumOptions2",
dynamicUrl: `请求url地址`,
dynamicTail: "data",
dynamicValueKey: "id",
dynamicLabelKey: "name"
}
},
级联选择器-cascader
fieldName: {
model: "fieldName",
type: "cascader",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称",
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
多选框-checkbox
配置与 select 基本一致
checkbox: {
model: "",
type: "checkbox",
wrapper: {
label: ""
},
customize: {
placeholder: "",
options: []
},
decorator: {
initialValue: undefined,
rules: [{ required: false, message: "请选择计算方式" }]
},
extend: {
dynamic: false,
dynamicKey: "lateFeeRuleList",
dynamicUrl: "/finance/api/v1/formulas/listAll",
dynamicTail: "data",
dynamicValueKey: "id",
dynamicLabelKey: "formula",
cascade: false,
cascadeModel: "messageTemplateId",
cascadeKey: "messageTemplateId"
}
}
单选框-radio
配置与 select 基本一致
radio: {
model: "",
type: "radio",
wrapper: {
label: ""
},
customize: {
placeholder: "",
options: []
},
decorator: {
initialValue: undefined,
rules: [{ required: false, message: "请选择计算方式" }]
},
extend: {
dynamic: false,
dynamicKey: "lateFeeRuleList",
dynamicUrl: "/finance/api/v1/formulas/listAll",
dynamicTail: "data",
dynamicValueKey: "id",
dynamicLabelKey: "formula",
cascade: false,
cascadeModel: "messageTemplateId",
cascadeKey: "messageTemplateId"
}
}
树选择器-treeSelect
fieldName: {
model: "fieldName",
type: "treeSelect",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称"
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
日期选择框-date
fieldName: {
model: "fieldName",
type: "date",
wrapper: {
label: "字段名称"
},
customize: {
allowClear: true,
placeholder: "请输入段名称",
format: "YYYY-MM-DD"
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {}
},
时间选择框-待开发
上传-upload
fieldName: {
model: "fieldName",
type: "upload",
wrapper: {
label: "上传资料"
},
customize: {
action: "/file/api/v1/site/default/uploadImg",
accept: ".jpg, .jpeg, .png, .bmp, .gif, .mp3, .wav, .wmv, .mp4, .mkv, .avi",
listType: "picture-card",
multiple: true
},
decorator: {
initialValue: undefined,
rules: [
{ required: true, message: "必填项" }
]
},
extend: {
size: 10,
limit: 1
}
},
开关-switch
fieldName: {
model: "fieldName",
type: "switch",
wrapper: {
label: "是否关闭"
},
customize: {},
decorator: {
valuePropName: "checked",
initialValue: false
}
},
地区选择-area
area: {
model: "",
type: "area",
wrapper: {
label: ""
},
customize: {
allowClear: true,
multiple: true,
placeholder: "请选择产品地区"
},
decorator: {
initialValue: undefined,
rules: [{ required: false, message: "必须上传" }]
},
extend: {
level: 3 // 2 为市级，3为县区级
}
}
若有收获，就点个赞吧
