自定义下拉表单组件


下拉列表的高级用法,需要有一定的技术对接能力,能实现以下目的:

  1. 企业自定义自有下拉的数据源
  2. 企业期望下拉的数据与自有系统保持一致
  3. 企业期望动态实时控制下拉数据

使用说明

  • 选择组件

  • 自定义配置入口

配置说明

配置项 说明 备注
设置必填 开启,访客必填,关闭,不必填
key 不必填 定义本组件的key,用于组件之间的联动 例如:city
下级依赖 不必填 填写该组件的依赖组件的key 例如:province
上级依赖 不必填 填写被受该组件影响的组件key 例如:country
接口 不必填 填写获取该组件的下拉数据源接口,接口返回值按照规范返回 例如:{ “code”: “200”, “list”: [ { “label”: “北京”, “value”: “10001” }, { “label”: “上海”, “value”: “10002” } ] }

参数设置

  1. 当组件加载数据源时,会将【上级依赖】组件的key名称为参数的名称,组件的选项value作为参数的value 传递给对应的服务器,获取当前组件的下拉数据源
  2. 当组件变动时。会将【下级依赖】对应的组件作清空,以达到联动效果
    例如:city在获取的时候,会将【上级依赖】province为参数,去获取对应的数据,而city变动时。对应的【下级依赖】country会发生对应的变动

接口说明

  • 接口描述:返回下拉列表数据

  • 方法类型:GET

  • 请求方式:

  • 请求参数:

    参数名 参数值
    上级依赖的组件key 上级依赖组件的value

    例如获取城市的接口
    https://demo.xxx.com/area/city?province=10001
    接口返回内容为固定格式

  • 返回值:

    {
      "code": "200",
      "list": [{
          "label": "北京",
          "value": "10001"
      }, {
          "label": "上海",
          "value": "10002"
      }]
    }
    
  • 返回值说明:

    参数名 是否必须 类型 备注
    code String 200请求成功
    list Object[] 选项集合,每个选项包含
    list[0].label 下拉列表的标签 例如:北京
    list[0].value 下拉列表的value 例如:10001

will 2024年7月4日 10:24 3364 收藏文档