amis/docs/components/form/chain-select.md
2020-07-31 12:40:04 +08:00

3.0 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://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "name": "select3",
            "type": "chained-select",
            "label": "级联下拉",
            "source": "https://houtai.baidu.com/api/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 提取值