级联选择器Cascader
填写与选择从大类到小类，一层层选到具体项目
先知道
省、市、区或商品类目这类层层深入的数据，可以用级联选择器逐级选择。界面要持续显示已经选到哪里，并说明父级能否直接选择；跨多个分支同时选择时，树选择更合适。
广东省 / 深圳市 / 南山区
广东省▸广西▸
广州市▸深圳市▸
福田区南山区
什么时候用
- 省市区地址：最经典的级联场景省 / 市 / 区广东省深圳市南山区
- 组织架构：公司 → 部门 → 小组技术中心 / 前端组技术中心 ▸平台研发 ▸前端组
- 商品 / 内容类目：大类 → 小类 → 具体分类数码电器 ▸手机通讯 ▸智能手机
- 选中后回显完整路径：让用户确认自己选了哪地址广东省 / 深圳市 / 南山区回显完整路径，选了哪一目了然
什么时候不用
- 数据只有一层：强行级联 → 用 选择器 Select进行中 ▸进行中只有一层数据，二级菜单纯属多余
- 要勾选多个分支 → 用 树选择 TreeSelect研发部 ×2☑ 研发部☑ 前端组☐ 后端组☐ 设计部
- 每层只有少量选项时，直接平铺会更快公开仅成员私密
- 选项太多，用户更想直接搜 → 用「可搜索级联」，层级和搜索可以兼得南山广东省 / 深圳市 / 南山区广东省 / 广州市 / 南山街道
组成结构 · Anatomy
南山区深圳市▸广州市▸
1触发框Trigger回显已选路径，如「广东 / 深圳 / 南山」
2级联列Column一级一列，选中即展开下一列
3选项Option当前级的一个可选项
4下级箭头Arrow表示这项还有子级，点它往右展开
常见变体 · Variants
省市区Region
广东省▸
深圳市▸
南山区
地址这类天然一层套一层的选择
完整路径回显Path Echo
广东省 / 深圳市 / 南山区
选了哪几级都要让用户看得明白
仅末级回显Leaf Only
南山区
层级只是过程,结果只认最后一级
可搜索Searchable
🔍南山
广东省 / 深圳市 / 南山区广西 / 桂林市 / 南山街道
选项太多时直接搜,不用逐层翻
典型使用场景
收货地址选择
所在地区
广东省 / 深圳市 / 南山区
广东省▸广西▸
广州市▸深圳市▸
福田区南山区
筛选商品类目
商品管理
数码电器 / 手机通讯
📱
智能手机 Pro
¥ 3,999
🎧
降噪耳机
¥ 899
⌚
运动手表
¥ 1,299
分配到部门
林小hu
技术中心 / 前端组
技术中心▸市场部▸
平台研发▸大数据▸
前端组后端组
选择所属行业
企业认证
公司名称
所属行业
信息技术 / 互联网