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: 补充 radios selectFirst 等文档 (#4116)

Browse Source
This commit is contained in:
吴多益 2022-04-24 10:46:23 +08:00 committed by GitHub
parent 2a6370cb88
commit ef173e90ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 167 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
docs/zh-CN/components/form/radios.md
View File

@ -116,6 +116,125 @@ order: 36
}
```
## 默认选择第一个
通过 `selectFirst` 属性配置
```schema: scope="body"
{
"type": "form",
"body": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"selectFirst": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 动态选项
可以配置 `source` 来从上下文或远程 api 拉取选项数据
```schema: scope="body"
{
"type": "page",
"body": {
"type": "form",
"data": {
"items": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
},
"body": [
{
"label": "选项",
"type": "radios",
"name": "radios",
"source": "${items}"
}
]
}
}
```
远程 api
```schema: scope="body"
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"label": "选项",
"type": "radios",
"name": "radios",
"source": "/api/mock2/form/getOptions?waitSeconds=1"
}
]
}
}
```
api 返回内容需要包含 options 字段
```json
{
"status": 0,
"msg": "",
"data": {
"value": "b", // 可选，如果返回就会自动选中 b 选项
// 必须用 options 作为选项组的 key 值
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
}
}
```
## 属性表
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@ -128,17 +247,18 @@ order: 36
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |
| inline | `boolean` | `true` | 是否显示为一行 |
| selectFirst | `boolean` | `false` | 是否默认选中第一个 |
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
## 事件表
| 事件名称 | 事件参数 | 说明 |
| -------- | -------------------------------------------------------------------------------------------------- | ---- |
| change | `value: string \| Option` 选中值 | 选中值发生变化时触发 |
| 事件名称 | 事件参数 | 说明 |
| -------- | -------------------------------- | -------------------- |
| change | `value: string \| Option` 选中值 | 选中值发生变化时触发 |
## 动作表
| 动作名称 | 动作配置 | 说明 |
| -------- | -------------------------------------------------------------------------------------------------- | ---- |
| clear | - | 清空 |
| reset | - | 重置 |
| 动作名称 | 动作配置 | 说明 |
| -------- | -------- | ---- |
| clear | - | 清空 |
| reset | - | 重置 |

42
examples/components/Linkage/OptionsLocal.jsx
View File

@ -1,11 +1,12 @@
export default {
type: 'page',
title: '表单选线的联动',
title: '表单选项的联动',
body: {
type: 'form',
mode: 'horizontal',
title: '',
actions: [],
debug: true,
body: [
'<p class="text-danger">表单选项内也能联动，通过配置 visibleOn、hiddenOn或者disabledOn</p>',
{
@ -38,11 +39,12 @@ export default {
},
{
label: '选项2',
label: '选项级别联动',
type: 'radios',
labelClassName: 'text-muted',
name: 'b',
inline: true,
selectFirst: true,
options: [
{
label: '选项1',
@ -62,6 +64,42 @@ export default {
visibleOn: 'data.a == 3'
}
]
},
{
label: '组件级别联动',
type: 'radios',
labelClassName: 'text-muted',
name: 'b',
inline: true,
selectFirst: true,
visibleOn: 'data.a == 1',
options: [
{
label: '选项1',
value: 1
}
]
},
{
label: '选项级别联动',
type: 'radios',
labelClassName: 'text-muted',
name: 'b',
inline: true,
selectFirst: true,
visibleOn: 'data.a == 2',
options: [
{
label: '选项1',
value: 1
},
{
label: '选项2',
value: 2
}
]
}
]
}