test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: 补充多选模式 valuesNoWrap 的说明 (#4423)

Browse Source
This commit is contained in:
吴多益 2022-05-23 14:13:00 +08:00 committed by GitHub
parent 0be039d5d2
commit 4ddcd2b67a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
docs/zh-CN/components/form/options.md
View File

@ -421,8 +421,46 @@ order: 2
}
```
还可以通过 `checkAll` 开启全选。
```schema: scope="body"
{
"type": "form",
"body": [
{
"label": "多选",
"type": "select",
"name": "select2",
"checkAll": true,
"multiple": true,
"source": "/api/mock2/form/getOptions"
}
]
}
```
默认多选的值格式为逗号拼接 value 值，例如：`1,2,3`，如果需要改变值格式，请阅读下面 [拼接符 delimiter](#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter)、[拼接值 joinValues](#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) 和 [提取多选值 extractValue](#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue)配置项。
如果值太多折行可以通过 `valuesNoWrap` 来避免折行。
```schema: scope="body"
{
"type": "form",
"debug": true,
"body": [
{
"label": "多选",
"type": "select",
"name": "select2",
"checkAll": true,
"valuesNoWrap": true,
"multiple": true,
"source": "/api/mock2/form/getOptions"
}
]
}
```
## 拼接符 delimiter
多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下
@ -1326,7 +1364,6 @@ order: 2
上例中我们配置了`"autoFill": {"option.instantValidate": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option.instantValidate`的文本框中。可以额外配置`"validateOnChange": true`，实现自动填充后立即校验填充项。
**多选模式**
当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。
@ -1368,12 +1405,13 @@ order: 2
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ------------ | --------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |
| multiple | `boolean` | `false` | 是否支持多选 |
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
| 属性名 | 类型 | 默认值 | 说明 |
| ------------ | --------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |
| multiple | `boolean` | `false` | 是否支持多选 |
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
| valuesNoWrap | `boolean` | `false` | 默认情况下多选所有选项都会显示，通过这个可以最多显示一行，超出的部分变成 ... |

34
mock/cfc/mock/form/getOptions.json
View File

@ -1,13 +1,25 @@
{
"status": 0,
"msg": "ok",
"data": {
"options": [
{ "label": "Option A", "value": "a" },
{ "label": "Option B", "value": "b" },
{ "label": "Option C", "value": "c" },
{ "label": "Option D", "value": "d" },
{ "label": "Option E", "value": "e" }
]
}
"status": 0,
"msg": "ok",
"data": {
"options": [
{"label": "Option A", "value": "a"},
{"label": "Option B", "value": "b"},
{"label": "Option C", "value": "c"},
{"label": "Option D", "value": "d"},
{"label": "Option E", "value": "e"},
{"label": "Option F", "value": "f"},
{"label": "Option G", "value": "g"},
{"label": "Option H", "value": "h"},
{"label": "Option I", "value": "i"},
{"label": "Option J", "value": "j"},
{"label": "Option K", "value": "k"},
{"label": "Option L", "value": "l"},
{"label": "Option M", "value": "m"},
{"label": "Option N", "value": "n"},
{"label": "Option O", "value": "o"},
{"label": "Option P", "value": "p"},
{"label": "Option Q", "value": "q"}
]
}
}