跳到主要内容
Termlib

UI 组件 · 表单输入

级联选择

Cascader

也叫：级联选择器、联动选择、省市区选择、多级下拉

一个下拉框，展开后按层级一列一列往右选，比如先选省、再选市、最后选区县。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

收货地址里的「所在地区」用级联选择：点击输入框弹出三列菜单，依次选省、市、区县，选中上一级后右侧出现下一级，有下级的选项右侧带小箭头；选完后输入框显示「浙江 / 杭州 / 西湖区」，支持输入关键字直接搜索。

发给

01判断

你的内容是这样吗？

对照两列，确认级联选择是不是你要找的。

符合这些情况，用级联选择

  • 表单里选择省市区、商品类目这类层级固定的单个值
  • 每一级都必须选，最终结果是一条完整路径
  • 页面空间有限，层级数据不适合整棵展开

是这些情况，换成别的

  • 需要一次勾选多个不同层级的节点，用带复选框的树形控件

    改用树形控件

  • 数据没有层级关系，用普通下拉选择

    改用下拉选择

  • 层级很深或某一级选项上百个，又不支持搜索

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    选到中间层就关闭菜单，用户以为已经选完，其实还缺一级

  2. 02

    没有搜索功能，用户要在几十个省市里一列列翻找

  3. 03

    输入框只显示最后一级「西湖区」，看不出属于哪个城市

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一个显示已选路径的输入框和弹出的多列菜单组成，每列对应一个层级，有下级的选项带右箭头。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个带下拉箭头的输入框，里面文字用斜杠分隔多级
  2. 2展开后是左右并排的两到三列菜单
  3. 3选中项高亮，有下级的选项右侧有小箭头

04解释

详细解释

级联选择看起来和普通 下拉选择 一样是一个输入框，点开后弹出的却是并排的多列菜单：第一列是省份，选中某个省后右边出现第二列城市，再选城市出现第三列区县，最后输入框里显示「浙江 / 杭州 / 西湖区」。它适合层级固定、每一级都要选的数据，比如地区、商品类目、组织部门。

和 树形控件 的区别：树把整个层级摊开放在页面上，适合浏览和批量勾选；级联选择收在一个下拉框里，占地小，主要用于在表单里选出一个值。和 穿梭框 的区别：穿梭框从平铺列表里挑一批，不强调层级。层级超过四级或每级选项上百个时，级联菜单会很难用，最好加上搜索。

开发者信息
术语 ID
component-cascader
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-cascader
  • .ant-cascader-dropdown
  • .el-cascader
  • .el-cascader-panel
  • .arco-cascader
  • .t-cascader
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • cascader
  • cascade-select
  • cascading-select
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Cascader
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30