跳到主要内容

分类选择框

左右联动的分类选择组件，适用于层级结构数据，支持双列联动但不支持多层级嵌套。

一、何时使用​

  • 用户需要在分组、分类、部门等结构中选择数据
  • 数据具有嵌套结构，左侧展示一级分类，右侧展示对应子项
  • 典型如：部门选择、商品分类选择、地区选择等

二、属性配置​

1. 数据源​

支持三种方式配置数据源：

  • 接口绑定：调用后端接口动态加载分类结构数据
  • 数据绑定：绑定来自父组件或页面的数据
  • 模型绑定：适用于结构清晰、数据稳定的场景

详见：数据绑定。

数据源设置

2. 数据​

数据项配置

选项说明：

选项含义说明
选项名称显示在左侧分类列表中的字段，如“部门名称”
选项值实际使用的值，如对应的部门 ID
选项子项表示子分类的数据字段（与“父级ID”互斥）
父级ID表示层级结构中上级分类 ID（与“选项子项”互斥）
左侧选中项绑定左侧当前选中的项
左侧初始值设置左侧默认选中的分类值
右侧选中项绑定右侧当前选中的子项
右侧初始值设置右侧默认选中的子项值

3. 功能​

功能配置

1）徽标类型​

可用于在分类项中显示状态提醒，提供三种显示方式：

  • 无（默认）
  • 小红点提示（适合状态提醒）
  • 数字徽标（适合展示数量）

示例：

  • 小红点：

    小红点模式

  • 数字徽标：

    徽标数模式

2）右侧自定义​

开启后，可在右侧区域渲染自定义内容，用于扩展显示逻辑、样式或功能组件。

3）多选​

开启后允许右侧子项多选，可配置最多允许选择的数量。

多选示例

4. 状态​

无组件特有状态，详见：通用状态。

三、样式​

无组件特有样式，详见：通用样式。

四、常见使用场景​

1. 部门层级选择​

用于员工管理、权限配置等场景中选择部门。

部门选择示例