mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
docs: 补充 radios selectFirst 等文档 (#4116)
This commit is contained in:
parent
2a6370cb88
commit
ef173e90ec
@ -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` 选中值 | 选中值发生变化时触发 |
|
||||
|
||||
## 动作表
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| -------- | -------------------------------------------------------------------------------------------------- | ---- |
|
||||
| -------- | -------- | ---- |
|
||||
| clear | - | 清空 |
|
||||
| reset | - | 重置 |
|
||||
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user