## Cascader 级联选择器 当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。 ### 基础用法 有两种触发子菜单的方式 :::demo 只需为 Cascader 的`options`属性指定选项数组即可渲染出一个级联选择器。通过`expand-trigger`可以定义展开子级菜单的触发方式。本例还展示了`change`事件,它的参数为 Cascader 的绑定值:一个由各级菜单的值所组成的数组。 ```html
默认 click 触发子菜单
hover 触发子菜单
``` ::: ### 禁用选项 通过在数据源中设置 `disabled` 字段来声明该选项是禁用的 :::demo 本例中,`options`指定的数组中的第一个元素含有`disabled: true`键值对,因此是禁用的。在默认情况下,Cascader 会检查数据中每一项的`disabled`字段是否为`true`,如果你的数据中表示禁用含义的字段名不为`disabled`,可以通过`props`属性来指定(详见下方 API 表格)。当然,`value`、`label`和`children`这三个字段名也可以通过同样的方式指定。 ```html ``` ::: ### 仅显示最后一级 可以仅在输入框中显示选中项最后一级的标签,而不是选中项所在的完整路径。 :::demo 属性`show-all-levels`定义了是否显示完整的路径,将其赋值为`false`则仅显示最后一级 ```html ``` ::: ### 默认值 :::demo 默认值通过数组的方式指定。 ```html ``` ::: ### 选择即改变 点击或移入选项即表示选中该项,可用于选择任意一级菜单的选项。 :::demo 若需要允许用户选择任意一级选项,则可将`change-on-select`赋值为`true` ```html ``` ::: ### 动态加载次级选项 当选中某一级时,动态加载该级下的选项。 :::demo 本例的选项数据源在初始化时不包含城市数据。利用`active-item-change`事件,可以在用户点击某个省份时拉取该省份下的城市数据。此外,本例还展示了`props`属性的用法。 ```html ``` ::: ### 可搜索 可以快捷地搜索选项并选择。 :::demo 将`filterable`赋值为`true`即可打开搜索功能。 ```html
只可选择最后一级菜单的选项
可选择任意一级菜单的选项
``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | value / v-model | 选中项绑定值 | array | — | — | | options | 可选项数据源,键名可通过 `props` 属性配置 | array | — | — | | props | 配置选项,具体见下表 | object | — | — | | separator | 选项分隔符 | string | — | 斜杠'/' | | popper-class | 自定义浮层类名 | string | — | — | | placeholder | 输入框占位文本 | string | — | 请选择 | | disabled | 是否禁用 | boolean | — | false | | clearable | 是否支持清空选项 | boolean | — | false | | expand-trigger | 次级菜单的展开方式 | string | click / hover | click | | show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true | | filterable | 是否可搜索选项 | boolean | — | — | | debounce | 搜索关键词输入的去抖延迟,毫秒 | number | — | 300 | | change-on-select | 是否允许选择任意一级的选项 | boolean | — | false | | size | 尺寸 | string | medium / small / mini | — | | before-filter | 筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选 | function(value) | — | — | ### props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----------------- | ------ | ------ | ------ | | value | 指定选项的值为选项对象的某个属性值 | string | — | — | | label | 指定选项标签为选项对象的某个属性值 | string | — | — | | children | 指定选项的子选项为选项对象的某个属性值 | string | — | — | | disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — | ### Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | change | 当绑定值变化时触发的事件 | 当前值 | | active-item-change | 当父级选项变化时触发的事件,仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组 | | blur | 在 Cascader 失去焦点时触发 | (event: Event) | | focus | 在 Cascader 获得焦点时触发 | (event: Event) | | visible-change | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false |