当一个数据集合有清晰的层级结构时,存在父子层级关系时,可通过级联选择器逐级查看并选择枚举组件。

设计目标

1.为方便录入基本信息,选择比手录更方便;
2.当数据信息庞大,只提供选择就不方便操作者操作,这时再提供手动录入就更高效了。

使用场景

可用场景

1.需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。

2.从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。

3.比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。
4.用于含有层级关系的枚举组件,例如省市、组织架构、不同导航层级等

不可用场景

  1. 分条描述
  2. 分条描述

组件拆解

基础组件

样式:标签名+级联选择框
应用位置:详细地址信息、层级关系清晰的数据内容;
image.png
1.初始状态
2.点击展开选择框。

交互规则

1.初始状态
2.点击后展开下拉选择框(级联选择器可hover/点击/直接全部显示)
3.选择完成
4.带删除状态
image.png

拓展形式

带搜索类型

1.初始状态
2.点击选择框出现搜索光标,可选择搜索或者选择
3.搜索完,出现匹配关键词
image.png