diff --git a/docs/components/action.html b/docs/components/action.html index 17b23583..3d65afae 100644 --- a/docs/components/action.html +++ b/docs/components/action.html @@ -14,7 +14,7 @@ - +
- - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + \n

options属性配置的对象数组就是select组件的选项组。

\n

选项组格式

标准格式
{\n    \"options\": [\n        {\n            \"label\": \"xxx1\",\n            \"value\": \"value1\"\n            ... // 其他变量值\n        },\n        {\n            \"label\": \"xxx2\",\n            \"value\": \"value2\"\n            ... // 其他变量值\n        }\n    ]\n}\n
\n

标准的选项格式为对象数组,数组中的每个对象需要两个必备字段:

\n\n

查看下面例子,修改选项你会发现数据域会发发生变化,改数据域中该表单项的值为选中选项的value值。

\n
\n
简单格式

也可以配置简单的字符串或数字数组,此时默认labelvalue保持一致

\n
\n

动态选项组 source

通过数据域中变量配置

你也可以配置source属性,利用 数据映射,获取当前数据链中的变量

\n
\n

上例中,我们给 select 组件,配置"source": "${items}",获取了当前数据域中的items变量作为选项组。

\n

远程拉取

除了可以通过数据映射获取当前数据域中的变量以外,source还支持配置接口,格式为 API,用于动态返回选项组。

\n
\n

远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"options"作为选项组的key值,如下

\n
{\n  \"status\": 0,\n  \"msg\": \"\",\n  \"data\": {\n    // 必须用 options 作为选项组的 key 值\n    \"options\": [\n      {\n        \"label\": \"A\",\n        \"value\": \"a\"\n      },\n      {\n        \"label\": \"B\",\n        \"value\": \"b\"\n      },\n      {\n        \"label\": \"C\",\n        \"value\": \"c\"\n      }\n    ]\n  }\n}\n
\n

自动选中

我们知道表单项可以通过配置value属性来设置默认值

\n

而选择器表单项如果设置value属性,为某一个选项中的value值,那么该选择器将自动选中该选项。

\n

静态配置

静态配置同表单项默认值配置方式,直接在组件上配置value属性。

\n
\n

上例我们设置默认值为b,则会自动匹配到选项B并选中。

\n

动态配置

有时候我们想默认选中一个选项,但是options又是远程拉取的,无法确定默认值是啥,这时候,需要在source接口中返回value,来动态设置默认值,接口返回数据结构如下:

\n
{\n  \"status\": 0,\n  \"msg\": \"\",\n  \"data\": {\n    \"value\": \"b\", // 这样就会自动选中b选项\n    \"options\": [\n      {\n        \"label\": \"A\",\n        \"value\": \"a\"\n      },\n      {\n        \"label\": \"B\",\n        \"value\": \"b\"\n      },\n      {\n        \"label\": \"C\",\n        \"value\": \"c\"\n      }\n    ]\n  }\n}\n
\n

多选 multiple

大部分选择器组件默认是单选的,可以配置"multiple": true支持多选。

\n
\n

拼接符 delimiter

多选模式下,默认表单项值为选中的选项的value值,用默认拼接符,拼接,如下

\n
\n

默认的拼接符是逗号,,但是当你的某个选项中的value值内包含,这个字符,这样会造成一些预期中的问题

\n

你可以设置delimiter属性,自定义拼接符,保证不与你选项中的value值冲突

\n
\n

上例我们value中有逗号,与默认拼接符冲突,这时设置"delimiter": "|",可以看到选择多个选项时,每个选项的value属性会用|拼接起来,作为表单项的值

\n

拼接值 joinValues

当选择器表单项选中某一选项后,当前表单项的值格式默认:

\n\n

选中下面两个选择器,观察数据域值变化。

\n
\n

但是你可以通过配置"joinValues": false,来获取完整的选项对象

\n

单选模式

单选模式下,配置"joinValues": false,该表单项值为选中选项的完整对象值,选中下例中的任意选项,观察数据域变化。

\n
\n

多选模式

多选模式下,配置"joinValues": false,该表单项值为所有选中项的对象数组

\n
\n

自动选中问题

当你通过joinValues调整选择器表单项的数据结构后,设置默认值时,格式也要和设置的数据结构保持一致

\n

例如下面这个例子,当你给select设置了"joinValues": false时,选中 B 选项,则该表单项值为{"label":"B","value":"b"},如果你想要默认选中某一项,则也需要设置value为完整的对象:{"label":"B","value":"b"}

\n
\n

提取多选值 extractValue

"joinValues": false时,默认会将选中的所有选项组成的对象数组,作为表单项的值,如果你想只抽取选项中的 value 值,拼成新的数组,那么可以配置"extractValue": true

\n
\n

选中所有选型,你会看到表单项的值为:["a", "b", "c"]

\n

自动选中问题

当你通过joinValuesextractValue调整选择器表单项的数据结构后,设置默认值时,格式也要和设置的数据结构保持一致

\n

例如下面这个例子,当你给select设置了"joinValues": false"extractValue": true时,选中 A、B 选项,则该表单项值为["a", "b"],如果你想要默认选中某一项,则也需要设置value为同样格式:["a", "b"]

\n
\n

自动补全 autoComplete

\n

可以在autoComplete配置中,用数据映射,获取变量term,为当前输入的关键字。

\n

支持该配置项的组件有:Text、Select、Chained-Select、TreeSelect。

\n

选项标签字段 labelField

默认渲染选项组,会获取每一项中的label变量作为展示文本,如果你的选中项中没有label字段,可能会有显示问题

\n

例如下例中,options 中只有textvalue字段而没有 value 字段,这时点开下拉框,你会发现选项无法正常显示。

\n
\n

这种情况下如果你想自定义该字段,则可以设置labelField

\n
\n
\n

不推荐使用该方式,建议格式化好选项组数据结构

\n
\n

选项值字段 valueField

默认渲染选项组,会获取每一项中的value变量作为表单项值,如果你的选中项中没有value字段,将会无法选中

\n

例如下例中,options 中只有labelval字段而没有value字段,这时点开下拉框,你会发现选项无法正常选中。

\n
\n

这种情况下如果你想自定义该字段,则可以设置valueField

\n
\n
\n

不推荐使用该方式,建议格式化好选项组数据结构

\n
\n

新增选项

部分选择器组件支持在前端进行新增选项的操作。

\n

支持该功能的组件有:CheckBoxes、Select、Tree

\n

前端新增 creatable

,可以配置"creatable": true,支持在前端临时新增选项。

\n
\n

点开下拉框,会看到选项列表底部有新增选项按钮,点击后会显示一个包含简单表单的弹框,点击提交可以新增选项,不同组件交互会有不同。

\n

新增选项表单弹框的默认配置如下:

\n
{\n  \"type\": \"dialog\",\n  \"title\": \"新增选项\",\n  \"body\": {\n    \"type\": \"form\",\n    \"controls\": [\n      {\n        \"type\": \"text\",\n        \"name\": \"label\",\n        \"label\": false,\n        \"placeholder\": \"请输入名称\"\n      }\n    ]\n  }\n}\n
\n\n

自定义新增表单项 addControls

默认只有一个文本框,也就是意味着,默认添加选项后,该选项labelvalue是一样的,如果你想自定义该表单中的表单项,你可以通过配置addControls属性

\n
\n

上例中你可以选项标题输入D,选项值输入d。实现自定义添加选项格式

\n

不过在没配置保存接口时,addControls中务必需要有labelFieldvalueField所配置的name表单项才可以正确保存

\n
\n

addControls属性格式为表单项数组,更多细节参考 FormItem 表单项

\n
\n

配置新增接口 addApi

默认新增只会暂时把新增的值保存在前端,如果你想前端新增选项后,同时把该选项保存到后端,则可以配置保存接口addApi

\n
\n
\n

配置addApi实际上将该配置值设置给该表单的api属性。

\n

如果同时配置了sourceaddApi,添加选项成功后会重新获取请求source接口

\n
\n

编辑选项

部分选择器组件支持在前端编辑选项

\n

支持该功能的组件有:CheckBoxes、Select、Tree、Table-formitem

\n

前端编辑 editable

配置"editable": true,支持在前端编辑选项。

\n
\n

点开下拉框,会看到每个选项右侧有一个编辑图标,点击后会显示一个编辑选项的弹框,修改后点击提交可以编辑选项标签。不同组件交互会有不同

\n

编辑选项弹框的默认配置如下:

\n
{\n  \"type\": \"dialog\",\n  \"title\": \"新增选项\",\n  \"body\": {\n    \"type\": \"form\",\n    \"controls\": [\n      {\n        \"type\": \"text\",\n        \"name\": \"label\",\n        \"label\": false,\n        \"placeholder\": \"请输入名称\"\n      }\n    ]\n  }\n}\n
\n\n

自定义编辑表单项 editControls

默认只能修改当前选项的label属性,如果你想要修改其他属性,可以配置editControls,自定义编辑表单项

\n
\n

修改后重新选中该表单项,观察数据域中数据变化。

\n

配置编辑接口 editApi

默认编辑只会作用在前端,如果你想前端编辑选项后,同时把该选项保存到后端,则可以配置保存接口editApi

\n
\n
\n

配置editApi实际上将该配置值设置给编辑表单的api属性。

\n

如果同时配置了sourceeditApi,添加选项成功后会重新获取请求source接口

\n
\n

删除选项

部分选择器组件,支持在前端进行编辑选项操作

\n

支持该功能的组件有:CheckBoxes、Select、Tree、Table-formitem

\n

配置删除接口 deleteApi

删除选项不支持在前端级别删除,我们认为是没有意义的,必须要配置deleteApi使用接口进行删除

\n

配置"removable": truedeleteApi,支持在前端删除选项。

\n
\n

点开下拉框,鼠标悬浮在选项上,可以看到右侧会有删除图标,点击可请求删除接口进行删除

\n

自动填充 autoFill

一些选择器组件,支持配置autoFill,将当前已选中的选项的某个字段的值,自动填充到表单中某个表单项中,只在单选时有效,支持数据映射

\n
\n

上例中我们配置了"autoFill": {"option": "${label}"},表示将选中项中的label的值,自动填充到当前表单项中nameoption的文本框中。

\n

支持该配置项的有:ButtonGroup、List、NestedSelect、Picker、Radios、Select。

\n

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名类型默认值说明
optionsArray<object>Array<string>选项组,供用户选择
sourcestringAPI选项组源,可通过数据映射获取当前数据域变量、或者配置 API 对象
multiplebooleanfalse是否多选
labelFieldboolean"label"标识选项中哪个字段是label
valueFieldboolean"value"标识选项中哪个字段是value
joinValuesbooleantrue是否拼接value
extractValuebooleanfalse是否将value值抽取出来组成新的数组,只有在joinValuesfalse是生效
\n", - "toc": { - "label": "目录", - "type": "toc", - "children": [ - { - "label": "静态选项组 options", - "fragment": "%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options", - "fullPath": "#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options", - "level": 2, - "children": [ - { - "label": "选项组格式", - "fragment": "%E9%80%89%E9%A1%B9%E7%BB%84%E6%A0%BC%E5%BC%8F", - "fullPath": "#%E9%80%89%E9%A1%B9%E7%BB%84%E6%A0%BC%E5%BC%8F", - "level": 3 - } - ] - }, - { - "label": "动态选项组 source", - "fragment": "%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source", - "fullPath": "#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source", - "level": 2, - "children": [ - { - "label": "通过数据域中变量配置", - "fragment": "%E9%80%9A%E8%BF%87%E6%95%B0%E6%8D%AE%E5%9F%9F%E4%B8%AD%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE", - "fullPath": "#%E9%80%9A%E8%BF%87%E6%95%B0%E6%8D%AE%E5%9F%9F%E4%B8%AD%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE", - "level": 3 - }, - { - "label": "远程拉取", - "fragment": "%E8%BF%9C%E7%A8%8B%E6%8B%89%E5%8F%96", - "fullPath": "#%E8%BF%9C%E7%A8%8B%E6%8B%89%E5%8F%96", - "level": 3 - } - ] - }, - { - "label": "自动选中", - "fragment": "%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD", - "fullPath": "#%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD", - "level": 2, - "children": [ - { - "label": "静态配置", - "fragment": "%E9%9D%99%E6%80%81%E9%85%8D%E7%BD%AE", - "fullPath": "#%E9%9D%99%E6%80%81%E9%85%8D%E7%BD%AE", - "level": 3 - }, - { - "label": "动态配置", - "fragment": "%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE", - "fullPath": "#%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE", - "level": 3 - } - ] - }, - { - "label": "多选 multiple", - "fragment": "%E5%A4%9A%E9%80%89-multiple", - "fullPath": "#%E5%A4%9A%E9%80%89-multiple", - "level": 2 - }, - { - "label": "拼接符 delimiter", - "fragment": "%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter", - "fullPath": "#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter", - "level": 2 - }, - { - "label": "拼接值 joinValues", - "fragment": "%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues", - "fullPath": "#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues", - "level": 2, - "children": [ - { - "label": "单选模式", - "fragment": "%E5%8D%95%E9%80%89%E6%A8%A1%E5%BC%8F", - "fullPath": "#%E5%8D%95%E9%80%89%E6%A8%A1%E5%BC%8F", - "level": 3 - }, - { - "label": "多选模式", - "fragment": "%E5%A4%9A%E9%80%89%E6%A8%A1%E5%BC%8F", - "fullPath": "#%E5%A4%9A%E9%80%89%E6%A8%A1%E5%BC%8F", - "level": 3 - }, - { - "label": "自动选中问题", - "fragment": "%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", - "fullPath": "#%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", - "level": 3 - } - ] - }, - { - "label": "提取多选值 extractValue", - "fragment": "%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue", - "fullPath": "#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue", - "level": 2, - "children": [ - { - "label": "自动选中问题", - "fragment": "%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", - "fullPath": "#%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", - "level": 3 - } - ] - }, - { - "label": "自动补全 autoComplete", - "fragment": "%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete", - "fullPath": "#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete", - "level": 2 - }, - { - "label": "选项标签字段 labelField", - "fragment": "%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield", - "fullPath": "#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield", - "level": 2 - }, - { - "label": "选项值字段 valueField", - "fragment": "%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield", - "fullPath": "#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield", - "level": 2 - }, - { - "label": "新增选项", - "fragment": "%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9", - "fullPath": "#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9", - "level": 2, - "children": [ - { - "label": "前端新增 creatable", - "fragment": "%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable", - "fullPath": "#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable", - "level": 3 - }, - { - "label": "自定义新增表单项 addControls", - "fragment": "%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols", - "fullPath": "#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols", - "level": 3 - }, - { - "label": "配置新增接口 addApi", - "fragment": "%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi", - "fullPath": "#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi", - "level": 3 - } - ] - }, - { - "label": "编辑选项", - "fragment": "%E7%BC%96%E8%BE%91%E9%80%89%E9%A1%B9", - "fullPath": "#%E7%BC%96%E8%BE%91%E9%80%89%E9%A1%B9", - "level": 2, - "children": [ - { - "label": "前端编辑 editable", - "fragment": "%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable", - "fullPath": "#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable", - "level": 3 - }, - { - "label": "自定义编辑表单项 editControls", - "fragment": "%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols", - "fullPath": "#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols", - "level": 3 - }, - { - "label": "配置编辑接口 editApi", - "fragment": "%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi", - "fullPath": "#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi", - "level": 3 - } - ] - }, - { - "label": "删除选项", - "fragment": "%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9", - "fullPath": "#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9", - "level": 2, - "children": [ - { - "label": "配置删除接口 deleteApi", - "fragment": "%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi", - "fullPath": "#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi", - "level": 3 - } - ] - }, - { - "label": "自动填充 autoFill", - "fragment": "%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill", - "fullPath": "#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill", - "level": 2 - }, - { - "label": "属性表", - "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", - "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", - "level": 2 - } - ], - "level": 0 - } - }; - -}); diff --git a/docs/components/form/options_907450f.js b/docs/components/form/options_907450f.js new file mode 100644 index 00000000..388251d5 --- /dev/null +++ b/docs/components/form/options_907450f.js @@ -0,0 +1,223 @@ +amis.define('docs/components/form/options.md', function(require, exports, module, define) { + + module.exports = { + "title": "Options 选择器表单项", + "description": null, + "type": 0, + "group": null, + "menuName": "Options 选择器表单项", + "icon": null, + "order": 2, + "html": "

选择器表单项 是指那些(例如下拉选择框)具有选择器特性的表单项

\n

它派生自 表单项,拥有表单项所有的特性。

\n

静态选项组 options

选择器表单项可以通过配置一组选项(options),可以供给用户选择,如下:

\n
\n

options属性配置的对象数组就是select选择器组件的选项组。

\n

选项组格式

标准格式
{\n    \"options\": [\n        {\n            \"label\": \"xxx1\",\n            \"value\": \"value1\",\n            \"chlidren\": []\n            ... // 其他变量值\n        },\n        {\n            \"label\": \"xxx2\",\n            \"value\": \"value2\",\n            \"chlidren\": []\n            ... // 其他变量值\n        }\n    ]\n}\n
\n

标准的选项格式为对象数组,数组中的每个对象需要两个必备字段:

\n\n

查看下面例子,修改选项你会发现数据域会发发生变化,改数据域中该表单项的值为选中选项的value值。

\n
\n
简单格式

也可以配置简单的字符串或数字数组,此时默认labelvalue保持一致

\n
\n

动态选项组 source

通过数据域中变量配置

你也可以配置source属性,利用 数据映射,获取当前数据链中的变量

\n
\n

上例中,我们给 select 组件,配置"source": "${items}",获取了当前数据域中的items变量作为选项组。

\n

远程拉取

除了可以通过数据映射获取当前数据域中的变量以外,source还支持配置接口,格式为 API,用于动态返回选项组。

\n
\n

远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"options"作为选项组的key值,如下

\n
{\n  \"status\": 0,\n  \"msg\": \"\",\n  \"data\": {\n    // 必须用 options 作为选项组的 key 值\n    \"options\": [\n      {\n        \"label\": \"A\",\n        \"value\": \"a\"\n      },\n      {\n        \"label\": \"B\",\n        \"value\": \"b\"\n      },\n      {\n        \"label\": \"C\",\n        \"value\": \"c\"\n      }\n    ]\n  }\n}\n
\n

自动选中

我们知道表单项可以通过配置value属性来设置默认值

\n

而选择器表单项如果设置value属性,为某一个选项中的value值,那么该选择器将自动选中该选项。

\n

静态配置

静态配置同表单项默认值配置方式,直接在组件上配置value属性。

\n
\n

上例我们设置默认值为b,则会自动匹配到选项B并选中。

\n

动态配置

有时候我们想默认选中一个选项,但是options又是远程拉取的,无法确定默认值是啥,这时候,需要在source接口中返回value,来动态设置默认值,接口返回数据结构如下:

\n
{\n  \"status\": 0,\n  \"msg\": \"\",\n  \"data\": {\n    \"value\": \"b\", // 这样就会自动选中b选项\n    \"options\": [\n      {\n        \"label\": \"A\",\n        \"value\": \"a\"\n      },\n      {\n        \"label\": \"B\",\n        \"value\": \"b\"\n      },\n      {\n        \"label\": \"C\",\n        \"value\": \"c\"\n      }\n    ]\n  }\n}\n
\n

多选 multiple

大部分选择器组件默认是单选的,可以配置"multiple": true支持多选。

\n
\n

拼接符 delimiter

多选模式下,默认表单项值为选中的选项的value值,用默认拼接符,拼接,如下

\n
\n

默认的拼接符是逗号,,但是当你的某个选项中的value值内包含,这个字符,这样会造成一些预期中的问题

\n

你可以设置delimiter属性,自定义拼接符,保证不与你选项中的value值冲突

\n
\n

上例我们value中有逗号,与默认拼接符冲突,这时设置"delimiter": "|",可以看到选择多个选项时,每个选项的value属性会用|拼接起来,作为表单项的值

\n

拼接值 joinValues

当选择器表单项选中某一选项后,当前表单项的值格式默认:

\n\n

选中下面两个选择器,观察数据域值变化。

\n
\n

但是你可以通过配置"joinValues": false,来获取完整的选项对象

\n

单选模式

单选模式下,配置"joinValues": false,该表单项值为选中选项的完整对象值,选中下例中的任意选项,观察数据域变化。

\n
\n

多选模式

多选模式下,配置"joinValues": false,该表单项值为所有选中项的对象数组

\n
\n

自动选中问题

当你通过joinValues调整选择器表单项的数据结构后,设置默认值时,格式也要和设置的数据结构保持一致

\n

例如下面这个例子,当你给select设置了"joinValues": false时,选中 B 选项,则该表单项值为{"label":"B","value":"b"},如果你想要默认选中某一项,则也需要设置value为完整的对象:{"label":"B","value":"b"}

\n
\n

提取多选值 extractValue

"joinValues": false时,默认会将选中的所有选项组成的对象数组,作为表单项的值,如果你想只抽取选项中的 value 值,拼成新的数组,那么可以配置"extractValue": true

\n
\n

选中所有选型,你会看到表单项的值为:["a", "b", "c"]

\n

自动选中问题

当你通过joinValuesextractValue调整选择器表单项的数据结构后,设置默认值时,格式也要和设置的数据结构保持一致

\n

例如下面这个例子,当你给select设置了"joinValues": false"extractValue": true时,选中 A、B 选项,则该表单项值为["a", "b"],如果你想要默认选中某一项,则也需要设置value为同样格式:["a", "b"]

\n
\n

自动补全 autoComplete

\n

可以在autoComplete配置中,用数据映射,获取变量term,为当前输入的关键字。

\n

支持该配置项的组件有:Text、Select、Chained-Select、TreeSelect。

\n

选项标签字段 labelField

默认渲染选项组,会获取每一项中的label变量作为展示文本,如果你的选中项中没有label字段,可能会有显示问题

\n

例如下例中,options 中只有textvalue字段而没有 value 字段,这时点开下拉框,你会发现选项无法正常显示。

\n
\n

这种情况下如果你想自定义该字段,则可以设置labelField

\n
\n
\n

不推荐使用该方式,建议格式化好选项组数据结构

\n
\n

选项值字段 valueField

默认渲染选项组,会获取每一项中的value变量作为表单项值,如果你的选中项中没有value字段,将会无法选中

\n

例如下例中,options 中只有labelval字段而没有value字段,这时点开下拉框,你会发现选项无法正常选中。

\n
\n

这种情况下如果你想自定义该字段,则可以设置valueField

\n
\n
\n

不推荐使用该方式,建议格式化好选项组数据结构

\n
\n

新增选项

部分选择器组件支持在前端进行新增选项的操作。

\n

支持该功能的组件有:CheckBoxes、Select、Tree

\n

前端新增 creatable

,可以配置"creatable": true,支持在前端临时新增选项。

\n
\n

点开下拉框,会看到选项列表底部有新增选项按钮,点击后会显示一个包含简单表单的弹框,点击提交可以新增选项,不同组件交互会有不同。

\n

新增选项表单弹框的默认配置如下:

\n
{\n  \"type\": \"dialog\",\n  \"title\": \"新增选项\",\n  \"body\": {\n    \"type\": \"form\",\n    \"controls\": [\n      {\n        \"type\": \"text\",\n        \"name\": \"label\",\n        \"label\": false,\n        \"placeholder\": \"请输入名称\"\n      }\n    ]\n  }\n}\n
\n\n

自定义新增表单项 addControls

默认只有一个文本框,也就是意味着,默认添加选项后,该选项labelvalue是一样的,如果你想自定义该表单中的表单项,你可以通过配置addControls属性

\n
\n

上例中你可以选项标题输入D,选项值输入d。实现自定义添加选项格式

\n

不过在没配置保存接口时,addControls中务必需要有labelFieldvalueField所配置的name表单项才可以正确保存

\n
\n

addControls属性格式为表单项数组,更多细节参考 FormItem 表单项

\n
\n

配置新增接口 addApi

默认新增只会暂时把新增的值保存在前端,如果你想前端新增选项后,同时把该选项保存到后端,则可以配置保存接口addApi

\n
\n
\n

配置addApi实际上将该配置值设置给该表单的api属性。

\n

如果同时配置了sourceaddApi,添加选项成功后会重新获取请求source接口

\n
\n

编辑选项

部分选择器组件支持在前端编辑选项

\n

支持该功能的组件有:CheckBoxes、Select、Tree、Table-formitem

\n

前端编辑 editable

配置"editable": true,支持在前端编辑选项。

\n
\n

点开下拉框,会看到每个选项右侧有一个编辑图标,点击后会显示一个编辑选项的弹框,修改后点击提交可以编辑选项标签。不同组件交互会有不同

\n

编辑选项弹框的默认配置如下:

\n
{\n  \"type\": \"dialog\",\n  \"title\": \"新增选项\",\n  \"body\": {\n    \"type\": \"form\",\n    \"controls\": [\n      {\n        \"type\": \"text\",\n        \"name\": \"label\",\n        \"label\": false,\n        \"placeholder\": \"请输入名称\"\n      }\n    ]\n  }\n}\n
\n\n

自定义编辑表单项 editControls

默认只能修改当前选项的label属性,如果你想要修改其他属性,可以配置editControls,自定义编辑表单项

\n
\n

修改后重新选中该表单项,观察数据域中数据变化。

\n

配置编辑接口 editApi

默认编辑只会作用在前端,如果你想前端编辑选项后,同时把该选项保存到后端,则可以配置保存接口editApi

\n
\n
\n

配置editApi实际上将该配置值设置给编辑表单的api属性。

\n

如果同时配置了sourceeditApi,添加选项成功后会重新获取请求source接口

\n
\n

删除选项

部分选择器组件,支持在前端进行编辑选项操作

\n

支持该功能的组件有:CheckBoxes、Select、Tree、Table-formitem

\n

配置删除接口 deleteApi

删除选项不支持在前端级别删除,我们认为是没有意义的,必须要配置deleteApi使用接口进行删除

\n

配置"removable": truedeleteApi,支持在前端删除选项。

\n
\n

点开下拉框,鼠标悬浮在选项上,可以看到右侧会有删除图标,点击可请求删除接口进行删除

\n

自动填充 autoFill

一些选择器组件,支持配置autoFill,将当前已选中的选项的某个字段的值,自动填充到表单中某个表单项中,只在单选时有效,支持数据映射

\n
\n

上例中我们配置了"autoFill": {"option": "${label}"},表示将选中项中的label的值,自动填充到当前表单项中nameoption的文本框中。

\n

支持该配置项的有:ButtonGroup、List、NestedSelect、Picker、Radios、Select。

\n

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名类型默认值说明
optionsArray<object>Array<string>选项组,供用户选择
sourcestringAPI选项组源,可通过数据映射获取当前数据域变量、或者配置 API 对象
multiplebooleanfalse是否多选
labelFieldboolean"label"标识选项中哪个字段是label
valueFieldboolean"value"标识选项中哪个字段是value
joinValuesbooleantrue是否拼接value
extractValuebooleanfalse是否将value值抽取出来组成新的数组,只有在joinValuesfalse是生效
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "静态选项组 options", + "fragment": "%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options", + "fullPath": "#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options", + "level": 2, + "children": [ + { + "label": "选项组格式", + "fragment": "%E9%80%89%E9%A1%B9%E7%BB%84%E6%A0%BC%E5%BC%8F", + "fullPath": "#%E9%80%89%E9%A1%B9%E7%BB%84%E6%A0%BC%E5%BC%8F", + "level": 3 + } + ] + }, + { + "label": "动态选项组 source", + "fragment": "%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source", + "fullPath": "#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source", + "level": 2, + "children": [ + { + "label": "通过数据域中变量配置", + "fragment": "%E9%80%9A%E8%BF%87%E6%95%B0%E6%8D%AE%E5%9F%9F%E4%B8%AD%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE", + "fullPath": "#%E9%80%9A%E8%BF%87%E6%95%B0%E6%8D%AE%E5%9F%9F%E4%B8%AD%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE", + "level": 3 + }, + { + "label": "远程拉取", + "fragment": "%E8%BF%9C%E7%A8%8B%E6%8B%89%E5%8F%96", + "fullPath": "#%E8%BF%9C%E7%A8%8B%E6%8B%89%E5%8F%96", + "level": 3 + } + ] + }, + { + "label": "自动选中", + "fragment": "%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD", + "fullPath": "#%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD", + "level": 2, + "children": [ + { + "label": "静态配置", + "fragment": "%E9%9D%99%E6%80%81%E9%85%8D%E7%BD%AE", + "fullPath": "#%E9%9D%99%E6%80%81%E9%85%8D%E7%BD%AE", + "level": 3 + }, + { + "label": "动态配置", + "fragment": "%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE", + "fullPath": "#%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE", + "level": 3 + } + ] + }, + { + "label": "多选 multiple", + "fragment": "%E5%A4%9A%E9%80%89-multiple", + "fullPath": "#%E5%A4%9A%E9%80%89-multiple", + "level": 2 + }, + { + "label": "拼接符 delimiter", + "fragment": "%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter", + "fullPath": "#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter", + "level": 2 + }, + { + "label": "拼接值 joinValues", + "fragment": "%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues", + "fullPath": "#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues", + "level": 2, + "children": [ + { + "label": "单选模式", + "fragment": "%E5%8D%95%E9%80%89%E6%A8%A1%E5%BC%8F", + "fullPath": "#%E5%8D%95%E9%80%89%E6%A8%A1%E5%BC%8F", + "level": 3 + }, + { + "label": "多选模式", + "fragment": "%E5%A4%9A%E9%80%89%E6%A8%A1%E5%BC%8F", + "fullPath": "#%E5%A4%9A%E9%80%89%E6%A8%A1%E5%BC%8F", + "level": 3 + }, + { + "label": "自动选中问题", + "fragment": "%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", + "fullPath": "#%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", + "level": 3 + } + ] + }, + { + "label": "提取多选值 extractValue", + "fragment": "%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue", + "fullPath": "#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue", + "level": 2, + "children": [ + { + "label": "自动选中问题", + "fragment": "%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", + "fullPath": "#%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E9%97%AE%E9%A2%98", + "level": 3 + } + ] + }, + { + "label": "自动补全 autoComplete", + "fragment": "%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete", + "fullPath": "#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete", + "level": 2 + }, + { + "label": "选项标签字段 labelField", + "fragment": "%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield", + "fullPath": "#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield", + "level": 2 + }, + { + "label": "选项值字段 valueField", + "fragment": "%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield", + "fullPath": "#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield", + "level": 2 + }, + { + "label": "新增选项", + "fragment": "%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9", + "fullPath": "#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9", + "level": 2, + "children": [ + { + "label": "前端新增 creatable", + "fragment": "%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable", + "fullPath": "#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable", + "level": 3 + }, + { + "label": "自定义新增表单项 addControls", + "fragment": "%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols", + "fullPath": "#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols", + "level": 3 + }, + { + "label": "配置新增接口 addApi", + "fragment": "%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi", + "fullPath": "#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi", + "level": 3 + } + ] + }, + { + "label": "编辑选项", + "fragment": "%E7%BC%96%E8%BE%91%E9%80%89%E9%A1%B9", + "fullPath": "#%E7%BC%96%E8%BE%91%E9%80%89%E9%A1%B9", + "level": 2, + "children": [ + { + "label": "前端编辑 editable", + "fragment": "%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable", + "fullPath": "#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable", + "level": 3 + }, + { + "label": "自定义编辑表单项 editControls", + "fragment": "%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols", + "fullPath": "#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols", + "level": 3 + }, + { + "label": "配置编辑接口 editApi", + "fragment": "%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi", + "fullPath": "#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi", + "level": 3 + } + ] + }, + { + "label": "删除选项", + "fragment": "%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9", + "fullPath": "#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9", + "level": 2, + "children": [ + { + "label": "配置删除接口 deleteApi", + "fragment": "%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi", + "fullPath": "#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi", + "level": 3 + } + ] + }, + { + "label": "自动填充 autoFill", + "fragment": "%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill", + "fullPath": "#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill", + "level": 2 + }, + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/panel.html b/docs/components/form/panel.html index 17b23583..3d65afae 100644 --- a/docs/components/form/panel.html +++ b/docs/components/form/panel.html @@ -14,7 +14,7 @@ - +
- - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + \n

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名类型默认值说明
optionsArray<object>Array<string>选项组
sourcestringAPI动态选项组
autoCompleteAPI自动提示补全
delimeterstringfalse拼接符
labelFieldstring"label"选项标签字段
valueFieldstring"value"选项值字段
joinValuesbooleantrue拼接值
extractValuebooleanfalse提取值
checkAllbooleanfalse是否支持全选
checkAllLabelstring全选全选的文字
defaultCheckAllbooleanfalse默认是否全选
creatablebooleanfalse新增选项
createBtnLabelstring"新增选项"新增选项
addControlsArray<表单项>自定义新增表单项
addApiAPI配置新增选项接口
editablebooleanfalse编辑选项
editControlsArray<表单项>自定义编辑表单项
editApiAPI配置编辑选项接口
removablebooleanfalse删除选项
deleteApiAPI配置删除选项接口
autoFillobject自动填充
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/select_ea3976f.js b/docs/components/form/select_ea3976f.js deleted file mode 100644 index fd90cd20..00000000 --- a/docs/components/form/select_ea3976f.js +++ /dev/null @@ -1,33 +0,0 @@ -amis.define('docs/components/form/select.md', function(require, exports, module, define) { - - module.exports = { - "title": "Select 选择器", - "description": null, - "type": 0, - "group": null, - "menuName": "Select 选择器", - "icon": null, - "order": 48, - "html": "

基本用法

\n

属性表

当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名类型默认值说明
optionsArray<object>Array<string>选项组
sourcestringAPI动态选项组
autoCompleteAPI自动提示补全
delimeterstringfalse拼接符
labelFieldstring"label"选项标签字段
valueFieldstring"value"选项值字段
joinValuesbooleantrue拼接值
extractValuebooleanfalse提取值
checkAllbooleanfalse是否支持全选
checkAllLabelstring全选全选的文字
defaultCheckAllbooleanfalse默认是否全选
creatablebooleanfalse新增选项
createBtnLabelstring"新增选项"新增选项
addControlsArray<表单项>自定义新增表单项
addApiAPI配置新增选项接口
editablebooleanfalse编辑选项
editControlsArray<表单项>自定义编辑表单项
editApiAPI配置编辑选项接口
removablebooleanfalse删除选项
deleteApiAPI配置删除选项接口
autoFillobject自动填充
\n", - "toc": { - "label": "目录", - "type": "toc", - "children": [ - { - "label": "基本用法", - "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", - "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", - "level": 2 - }, - { - "label": "属性表", - "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", - "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", - "level": 2 - } - ], - "level": 0 - } - }; - -}); diff --git a/docs/components/form/service.html b/docs/components/form/service.html index 17b23583..3d65afae 100644 --- a/docs/components/form/service.html +++ b/docs/components/form/service.html @@ -14,7 +14,7 @@ - +
- - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + + + + + + + + + diff --git a/docs/components/form/tabs-transfer_869da79.js b/docs/components/form/tabs-transfer_869da79.js new file mode 100644 index 00000000..a013b79d --- /dev/null +++ b/docs/components/form/tabs-transfer_869da79.js @@ -0,0 +1,26 @@ +amis.define('docs/components/form/tabs-transfer.md', function(require, exports, module, define) { + + module.exports = { + "title": "TabsTransfer 组合穿梭器", + "description": null, + "type": 0, + "group": null, + "menuName": "TabsTransfer 组合穿梭器", + "icon": null, + "html": "

穿梭器(Transfer)的基础上扩充了左边的展示形式,支持 Tabs 的形式展示。对应的 options 的顶级数据,顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。

\n
\n

属性表

更多配置请参考穿梭器(Transfer)

\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/tabs.html b/docs/components/form/tabs.html index 17b23583..3d65afae 100644 --- a/docs/components/form/tabs.html +++ b/docs/components/form/tabs.html @@ -14,7 +14,7 @@ - +
- - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + + + + + + + + + diff --git a/docs/components/form/transfer_c09c07e.js b/docs/components/form/transfer_c09c07e.js new file mode 100644 index 00000000..92ae31cf --- /dev/null +++ b/docs/components/form/transfer_c09c07e.js @@ -0,0 +1,88 @@ +amis.define('docs/components/form/transfer.md', function(require, exports, module, define) { + + module.exports = { + "title": "Transfer 穿梭器", + "description": null, + "type": 0, + "group": null, + "menuName": "Transfer 穿梭器", + "icon": null, + "html": "

基本用法

\n

展示模式

分组

\n

表格模式

\n

树形模式

\n

级联选择

\n

支持搜索

\n

延时加载

\n

关联选择模式

\n

searchApi

发送

\n

默认 GET,携带 term 变量,值为搜索框输入的文字,可从上下文中取数据设置进去。

\n

响应

\n

格式要求如下:

\n
{\n  \"status\": 0,\n  \"msg\": \"\",\n  \"data\": {\n    \"options\": [\n      {\n        \"label\": \"描述\",\n        \"value\": \"值\" // ,\n        // \"children\": [] // 可以嵌套\n      },\n\n      {\n        \"label\": \"描述2\",\n        \"value\": \"值2\"\n      }\n    ],\n\n    \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n  }\n}\n
\n

适用于需选择的数据/信息源较多时,用户可直观的知道自己所选择的数据/信息的场景,一般左侧框为数据/信息源,右侧为已选数据/信息,被选中信息同时存在于 2 个框内。

\n

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名类型默认值说明
optionsArray<object>Array<string>选项组
sourcestringAPI动态选项组
delimeterstringfalse拼接符
joinValuesbooleantrue拼接值
extractValuebooleanfalse提取值
searchablebooleanfalse当设置为 true 时表示可以通过输入部分内容检索出选项。
searchApiAPI如果想通过接口检索,可以设置个 api。
statisticsbooleantrue是否显示统计数据
selectTitlestring"请选择"左侧的标题文字
resultTitlestring"当前选择"右侧结果的标题文字
sortablebooleanfalse结果可以进行拖拽排序
selectModestringlist可选:listtabletreechainedassociated。分别为:列表形式、表格形式、树形选择形式、级联选择形式,关联选择形式(与级联选择的区别在于,级联是无限极,而关联只有一级,关联左边可以是个 tree)。
searchResultModestring如果不设置将采用 selectMode 的值,可以单独配置,参考 selectMode,决定搜索结果的展示形式。
columnsArray<Object>当展示形式为 table 可以用来配置展示哪些列,跟 table 中的 columns 配置相似,只是只有展示功能。
leftOptionsArray<Object>当展示形式为 associated 时用来配置左边的选项集。
leftModestring当展示形式为 associated 时用来配置左边的选择形式,支持 list 或者 tree。默认为 list
rightModestring当展示形式为 associated 时用来配置右边的选择形式,可选:listtabletreechained
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "展示模式", + "fragment": "%E5%B1%95%E7%A4%BA%E6%A8%A1%E5%BC%8F", + "fullPath": "#%E5%B1%95%E7%A4%BA%E6%A8%A1%E5%BC%8F", + "level": 2, + "children": [ + { + "label": "分组", + "fragment": "%E5%88%86%E7%BB%84", + "fullPath": "#%E5%88%86%E7%BB%84", + "level": 3 + }, + { + "label": "表格模式", + "fragment": "%E8%A1%A8%E6%A0%BC%E6%A8%A1%E5%BC%8F", + "fullPath": "#%E8%A1%A8%E6%A0%BC%E6%A8%A1%E5%BC%8F", + "level": 3 + }, + { + "label": "树形模式", + "fragment": "%E6%A0%91%E5%BD%A2%E6%A8%A1%E5%BC%8F", + "fullPath": "#%E6%A0%91%E5%BD%A2%E6%A8%A1%E5%BC%8F", + "level": 3 + }, + { + "label": "级联选择", + "fragment": "%E7%BA%A7%E8%81%94%E9%80%89%E6%8B%A9", + "fullPath": "#%E7%BA%A7%E8%81%94%E9%80%89%E6%8B%A9", + "level": 3 + }, + { + "label": "支持搜索", + "fragment": "%E6%94%AF%E6%8C%81%E6%90%9C%E7%B4%A2", + "fullPath": "#%E6%94%AF%E6%8C%81%E6%90%9C%E7%B4%A2", + "level": 3 + }, + { + "label": "延时加载", + "fragment": "%E5%BB%B6%E6%97%B6%E5%8A%A0%E8%BD%BD", + "fullPath": "#%E5%BB%B6%E6%97%B6%E5%8A%A0%E8%BD%BD", + "level": 3 + }, + { + "label": "关联选择模式", + "fragment": "%E5%85%B3%E8%81%94%E9%80%89%E6%8B%A9%E6%A8%A1%E5%BC%8F", + "fullPath": "#%E5%85%B3%E8%81%94%E9%80%89%E6%8B%A9%E6%A8%A1%E5%BC%8F", + "level": 3 + } + ] + }, + { + "label": "searchApi", + "fragment": "searchapi", + "fullPath": "#searchapi", + "level": 2 + }, + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/tree.html b/docs/components/form/tree.html index 17b23583..3d65afae 100644 --- a/docs/components/form/tree.html +++ b/docs/components/form/tree.html @@ -14,7 +14,7 @@ - +
- - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + +