2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
title: Input-Group 输入框组合
|
2020-07-29 17:33:14 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
group: null
|
|
|
|
menuName: Input-Group
|
2020-07-29 17:33:14 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 28
|
|
|
|
---
|
2020-07-29 17:33:14 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
**输入框组合选择器** 可用于输入框与其他组件进行组合。
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-04 10:27:19 +08:00
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
|
|
|
"type": "input-group",
|
|
|
|
"name": "input-group",
|
|
|
|
"label": "input 组合",
|
2021-06-04 10:27:19 +08:00
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
2021-06-04 10:27:19 +08:00
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
"placeholder": "搜索作业ID/名称",
|
|
|
|
"inputClassName": "b-r-none p-r-none",
|
|
|
|
"name": "input-group"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"type": "submit",
|
|
|
|
"label": "搜索",
|
|
|
|
"level": "primary"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"type": "input-group",
|
|
|
|
"label": "各种组合",
|
2021-06-04 10:27:19 +08:00
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
|
|
|
"type": "select",
|
|
|
|
"name": "memoryUnits",
|
|
|
|
"options": [
|
|
|
|
{
|
|
|
|
"label": "Gi",
|
|
|
|
"value": "Gi"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "Mi",
|
|
|
|
"value": "Mi"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "Ki",
|
|
|
|
"value": "Ki"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
"value": "Gi"
|
|
|
|
},
|
|
|
|
{
|
2021-06-04 10:27:19 +08:00
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
"name": "memory"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"type": "select",
|
|
|
|
"name": "memoryUnits2",
|
|
|
|
"options": [
|
|
|
|
{
|
|
|
|
"label": "Gi",
|
|
|
|
"value": "Gi"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "Mi",
|
|
|
|
"value": "Mi"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "Ki",
|
|
|
|
"value": "Ki"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
"value": "Gi"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"type": "button",
|
|
|
|
"label": "Go"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
|
2020-07-29 17:33:14 +08:00
|
|
|
## 校验
|
|
|
|
|
|
|
|
input-group 配置校验方法较为特殊,需要配置下面步骤:
|
|
|
|
|
|
|
|
1. input-group 上配置任意`name`值
|
2021-06-04 10:27:19 +08:00
|
|
|
2. input-group 的 body 内配置的表单项上配置校验规则
|
2020-07-29 17:33:14 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
## 属性表
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
| --------- | --------------------------- | ------ | ---------- |
|
|
|
|
| className | `string` | | CSS 类名 |
|
2021-06-04 10:27:19 +08:00
|
|
|
| body | Array<[表单项](./formitem)> | | 表单项集合 |
|