amis/docs/zh-CN/components/form/chain-select.md
2022-03-16 10:39:12 +08:00

3.7 KiB
Executable File
Raw Blame History

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

基本用法

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

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "select3",
            "type": "chained-select",
            "label": "级联下拉",
            "source": "/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 提取值

事件表

事件名称 事件参数 说明
change value: string | Option[] 选中值 选中值发生变化时触发

动作表

动作名称 动作配置 说明
clear - 清空
reset resetValue: boolean 重置值 重置