From ef173e90ec2c2185992ebafcec75223946bd3178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Sun, 24 Apr 2022 10:46:23 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=20radios=20selectFir?= =?UTF-8?q?st=20=E7=AD=89=E6=96=87=E6=A1=A3=20(#4116)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/radios.md | 134 ++++++++++++++++++- examples/components/Linkage/OptionsLocal.jsx | 42 +++++- 2 files changed, 167 insertions(+), 9 deletions(-) diff --git a/docs/zh-CN/components/form/radios.md b/docs/zh-CN/components/form/radios.md index 2d4097aaa..2d7aa7724 100644 --- a/docs/zh-CN/components/form/radios.md +++ b/docs/zh-CN/components/form/radios.md @@ -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 | - | 重置 | diff --git a/examples/components/Linkage/OptionsLocal.jsx b/examples/components/Linkage/OptionsLocal.jsx index 92c6191fa..2c4e4388d 100644 --- a/examples/components/Linkage/OptionsLocal.jsx +++ b/examples/components/Linkage/OptionsLocal.jsx @@ -1,11 +1,12 @@ export default { type: 'page', - title: '表单选线的联动', + title: '表单选项的联动', body: { type: 'form', mode: 'horizontal', title: '', actions: [], + debug: true, body: [ '

表单选项内也能联动，通过配置 visibleOn、hiddenOn或者disabledOn

', { @@ -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 + } + ] } ] }