amis/docs/zh-CN/components/form/chain-select.md
RickCole 54e56402d2
文档拆分组件部分 (#1502)
* 文档样式一点小优化

* 文档拆分组件部分
2021-02-01 20:44:49 +08:00

3.2 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Chain-Select 链式下拉框 0 null Chain-Select 7

基本用法

用于实现无限级别下拉,只支持单选,且必须和 source 搭配,通过 API 拉取数据,只要 API 有返回结果,就能一直无限级别下拉。

{
    "type": "form",
    "debug": true,
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "name": "select3",
            "type": "chained-select",
            "label": "级联下拉",
            "source": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4",
            "value": "a,b"
        }
    ]
}

source接口中配置的参数waitSeconds=1maxLevel=4是测试接口所需参数,实际使用自己接口时不需要添加这两个参数

暴露参数

为了帮助后端接口获取当前选择器状态chained-select 会默认给 source 接口的数据域中,添加若干个参数:

  • value: 选中的表单项值;
  • level: 当前拉取数据时的层级,
  • parentId: 上一级选项的值,数据格式基于配置的joinValuesextractValue属性
  • parent: 上一级选项的完整的数据格式

属性表

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

属性名 类型 默认值 说明
options Array<object>Array<string> 选项组
source stringAPI 动态选项组
autoComplete stringAPI 自动选中
delimiter string , 拼接符
labelField boolean "label" 选项标签字段
valueField boolean "value" 选项值字段
joinValues boolean true 拼接值
extractValue boolean false 提取值