2020-07-28 10:03:53 +08:00
|
|
|
|
---
|
|
|
|
|
title: Group 表单项组
|
2020-07-29 16:20:21 +08:00
|
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
type: 0
|
|
|
|
|
group: null
|
|
|
|
|
menuName: Group
|
2020-07-29 16:20:21 +08:00
|
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
order: 24
|
|
|
|
|
---
|
|
|
|
|
|
2020-12-22 19:08:38 +08:00
|
|
|
|
表单项,默认都是一行显示一个,Group 组件用于在一行展示多个表单项,会自动根据表单项数量均分宽度。
|
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-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "group",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text1",
|
|
|
|
|
"label": "文本1"
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text2",
|
|
|
|
|
"label": "文本2"
|
|
|
|
|
}
|
|
|
|
|
]
|
2020-12-22 19:08:38 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "divider"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "group",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-12-22 19:08:38 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-12-22 19:08:38 +08:00
|
|
|
|
"name": "text3",
|
|
|
|
|
"label": "文本3"
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-12-22 19:08:38 +08:00
|
|
|
|
"name": "text4",
|
|
|
|
|
"label": "文本4"
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-12-22 19:08:38 +08:00
|
|
|
|
"name": "text5",
|
|
|
|
|
"label": "文本5"
|
|
|
|
|
}
|
|
|
|
|
]
|
2020-07-28 10:03:53 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 展示
|
|
|
|
|
|
2020-09-21 16:38:51 +08:00
|
|
|
|
可以给`group`组件设置`mode`调整展示模式,用法同 [Form 展示](./index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA)
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
|
下面`group`我们配置了`"mode": "horizontal"`,观察显示情况
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-12-22 19:08:38 +08:00
|
|
|
|
"name": "text",
|
|
|
|
|
"label": "文本"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
2020-12-22 19:08:38 +08:00
|
|
|
|
"type": "divider"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "group",
|
|
|
|
|
"mode": "horizontal",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text1",
|
|
|
|
|
"label": "文本1"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text2",
|
|
|
|
|
"label": "文本2"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
当表单在水平模式下时,如果`group`内表单项设置`"label": false`,会导致布局错乱,如下
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"mode": "horizontal",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text",
|
|
|
|
|
"label": "文本"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "divider"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "group",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text1",
|
|
|
|
|
"label": false
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text2",
|
|
|
|
|
"label": false
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
这时可以给`group`配置`label`属性,保持和其他表单项布局统一
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"mode": "horizontal",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text",
|
|
|
|
|
"label": "文本"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "divider"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "group",
|
|
|
|
|
"label": "文本组",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text1",
|
|
|
|
|
"label": false
|
|
|
|
|
},
|
|
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "text2",
|
|
|
|
|
"label": false
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- |
|
|
|
|
|
| className | `string` | | CSS 类名 |
|
2020-07-29 16:20:21 +08:00
|
|
|
|
| label | `string` | | group 的标签 |
|
2021-06-07 10:09:55 +08:00
|
|
|
|
| body | Array<[表单项](./formitem)> | | 表单项集合 |
|
2020-09-21 16:38:51 +08:00
|
|
|
|
| mode | `string` | | 展示默认,同 [Form](./index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA) 中的模式 |
|
2020-08-03 11:31:02 +08:00
|
|
|
|
| gap | `string` | | 表单项之间的间距,可选:`xs`、`sm`、`normal` |
|
2020-07-28 10:03:53 +08:00
|
|
|
|
| direction | `string` | `"horizontal"` | 可以配置水平展示还是垂直展示。对应的配置项分别是:`vertical`、`horizontal` |
|