级联选择器Cascader
你可能会说
选地址那种,先选省、再选市、再选区,一层层点下去。
点开一个选项后继续选择下一级,常见于省、市、区选择例如填写收货地址时,先选“广东省”,再选“深圳市”,最后选“南山区”,完成后要显示整条路径。若用户需要同时选择多个地区,用 树选择 Tree Select 更合适。
组成结构 · Anatomy
南山区深圳市▸广州市▸
回显已选路径,如「广东 / 深圳 / 南山」
一级一列,选中即展开下一列
当前级的一个可选项
表示这项还有子级,点它往右展开
常见变体 · Variants
省市区Region
广东省▸
深圳市▸
南山区
地址等具有明确父子层级的数据
完整路径回显Path Echo
广东省 / 深圳市 / 南山区
选了哪几级都要让用户看得明白
仅末级回显Leaf Only
南山区
层级仅用于选择过程,提交结果只保留末级节点
可搜索Searchable
🔍南山
广东省 / 深圳市 / 南山区广西 / 桂林市 / 南山街道
选项较多时支持直接搜索路径
典型使用场景
收货地址选择
所在地区
广东省 / 深圳市 / 南山区
广东省▸广西▸
广州市▸深圳市▸
福田区南山区
筛选商品类目
商品管理
数码电器 / 手机通讯
📱
智能手机 Pro
¥ 3,999
🎧
降噪耳机
¥ 899
⌚
运动手表
¥ 1,299
分配到部门
技术中心▸市场部▸
平台研发▸大数据▸
前端组后端组
选择所属行业
企业认证
公司名称
所属行业
信息技术 / 互联网