表单组件
2024年11月27日大约 2 分钟
介绍
本文将介绍 Simple Admin 内置的表单组件, 只需在 schema 中使用即可
ApiSelect
ApiSelect 组件是比较常用的组件,用于从服务器获取数据实现单选或多选
注意
Vben2 中的 ApiMultipleSelect 已合并至 ApiSelect
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
numberToString | boolean | false | 是否将数字转换为字符串 |
api | function | null | 请求方法 |
params | Object | undefined | 请求数据 |
resultField | string | data.data | 数据位置 |
labelField | string | label | 标签字段 |
valueField | string | value | 值字段 |
immediate | boolean | true | 是否立即请求 |
alwaysLoad | boolean | false | 每次使用都请求 |
showSearch | boolean | false | 是否启用搜索功能 |
searchField | string | 搜索字段名称 | |
multiple | boolean | false | 是否可以多选 |
optionFilterProp | string | label | 筛选字段 |
ApiTreeSelect
ApiTreeSelect 是树形选择组件
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
numberToString | boolean | false | 是否将数字转换为字符串 |
api | function | null | 请求方法 |
params | Object | undefined | 请求数据 |
resultField | string | data.data | 数据位置 |
labelField | string | label | 标签字段 |
valueField | string | value | 值字段 |
immediate | boolean | true | 是否立即请求 |
showSearch | boolean | false | 是否启用搜索功能 |
multiple | boolean | false | 是否可以多选 |
treeNodeFilterProp | string | label | 筛选字段 |
idKeyField | string | id | id 字段 |
parentKeyField | string | parentId | 父级字段 |
childrenKeyField | string | children | 子级字段 |
DictionarySelect
Dictionary Select 是字典选择组件
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
dictionaryName | string | 字典名称(name) | |
cache | boolean | false | 是否缓存 |
ImageUpload
ImageUpload 是图片上传组件
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
provider | string | local | local为本地文件, cloud-default 为默认服务商,如果是自定义名字则会根据名称使用对应的云服务商 |
multiple | boolean | false | 是否支持多选 |
accept | array | [] | 接收的类型 |
maxNumber | number | 1 | 最大数量 |
maxSize | number | 2 | 最大大小(MB) |
UploadDragger
拖拽上传组件
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
multiple | boolean | false | 多个文件 |
provider | string | local | 提供商, local 为本地, cloud-default 为默认云服务商, 如果是自定义名字则会根据名称使用对应的云服务商 |
RadioButtonGroup
选择按钮
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
options | Array | undefined | 选项数据 |
SimpleTimePicker
时间选择组件
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
timeMode | string | datetime | datetime 是日期和时间, date 是仅日期 |
valueFormat | string | unixmilli | unixmilli 是毫秒时间戳, unix 是秒级时间戳 |
SimpleRangePicker
时间范围选择组件
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
timeMode | string | datetime | datetime 是日期和时间, date 是仅日期 |
valueFormat | string | unixmilli | unixmilli 是毫秒时间戳, unix 是秒级时间戳 |
Editor
富文本
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
uploadProvider | string | local | 提供商, local 为本地, cloud-default 为默认云服务商, 如果是自定义名字则会根据名称使用对应的云服务商 |
CodeEditor
代码编辑
参数 | 类型 | 默认值 | 介绍 |
---|---|---|---|
mode | string | json | 支持 json 和 yaml |