跳到主要内容

级联选择框

级联选择框用于多层级数据的逐级选择，典型场景如省市区地址选择。

一、何时使用​

  • 选项具有明显的层级关系（如：省 → 市 → 区）
  • 每层选项内容依赖上一层的选择
  • 单层选项较多，不适合一次性平铺展示
  • 需要用户完整选择路径作为输入值（例如表单）

二、属性配置​

1. 数据源设置​

数据源设置

支持通过以下方式配置数据源：

  • 接口获取数据
  • 数据绑定（父组件/页面数据）
  • 模型绑定

2. 数据字段设置​

数据面板

2.1 选项名称​

设置显示给用户看的字段名：

选项名称

2.2 选项值​

设置提交后端或作为实际取值使用的字段名。

2.3 选项子项​

设置下一级子选项字段（嵌套数据结构）：

选项子项

2.4 父级 ID​

用于配置“平铺结构”转“树状结构”，自动构建层级关系。
⚠️ 与“选项子项”配置互斥，只能二选一。

2.5 数据绑定​

绑定父组件或页面数据源。详见：数据绑定

2.6 初始值​

设置默认选中的值路径，可以为数组形式，例如 ["广东", "深圳", "南山"]：

初始值设置

3. 功能设置​

功能面板

3.1 占位提示​

设置未选择时的提示文字：

占位提示

3.2 标题 / 选择提示​

为选择框设置标题或说明性提示：

标题和选择提示

3.3 关闭按钮​

控制级联选择弹窗右上角关闭按钮的显示：

关闭按钮

4. 外观设置​

4.1 选中颜色​

设置高亮显示的选中项颜色：

选中颜色

5. 状态设置​

级联选择框无特殊状态控制。详见：通用状态。

三、样式设置​

样式设置方式统一，详见：通用样式。

四、常见使用场景​

1. 地区选择（省市区）​

用于地址填写、门店选择、收货信息填写等：

地区选择

2. 分类选择（如课程类别）​

在线教育平台选择课程类型，如：学科 → 年级 → 课程：

课程分类