# Cascader 级联选择

级联选择框.

## 何时使用

- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- 比起`Select`组件，可以在同一个浮层中完成选择，有较好的体验。

### 基本使用

省市区级联。

@[demo](./demo/basic.vue)

### 禁用选项

通过在数据源中设置`disabled`字段来声明该选项是禁用的

@[demo](./demo/disabled.vue)

### 动态加载次级选项

当选中某一级时，动态加载该级下的选项，
本示例也展示了通过`keymap`自定义字段。

@[demo](./demo/dynamic.vue)

### 可搜索

可以快捷地搜索选项并选择。

@[demo](./demo/filter.vue)

## props

| 参数             | 说明                                                  | 类型    | 可选值        | 默认值  |
| ---------------- | ----------------------------------------------------- | ------- | ------------- | ------- |
| value            | 选中项的 value 值列表                                 | array   | -             | -       |
| options          | 可选项数据源，键名可通过`keymap`属性配置              | array   | -             | -       |
| keymap           | 配置选项，具体见下表                                  | 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 | -             | false   |
| debounce         | 搜索关键词输入的去抖延迟，毫秒                        | number  | -             | 300     |
| change-on-select | 是否允许选择任意一级的选项                            | boolean | -             | false   |
| option-style     | 可以设置选项的样式，比如通过 "max-width" 设置最大宽度 | object  | -             | -       |
| on-change | 选择后触发的回调                       | function(path, option) | function | —      |
| on-clear  | 清空后触发的回调                       | function()             | function | —      |

## keymap 属性配置

| 参数      | 说明                                   | 类型                   | 可选值   | 默认值 |
| --------- | -------------------------------------- | ---------------------- | -------- | ------ |
| value     | 指定选项的值为选项对象的某个属性值     | string                 | —        | —      |
| label     | 指定选项标签为选项对象的某个属性值     | string                 | —        | —      |
| children  | 指定选项的子选项为选项对象的某个属性值 | string                 | —        | —      |
| disabled  | 指定选项的禁用为选项对象的某个属性值   | string                 | —        | —      |

## events

| 事件名             | 说明                                                              | 回调参数             |
| ------------------ | ----------------------------------------------------------------- | -------------------- |
| active-item-change | 当父级选项变化时触发的事件，仅在`change-on-select`为`false`并且`hide-on-change`为`false`时可用 | value                |
| change             | 选择后触发的回掉                                                  | 选择的路径及节点数据 |
| clear              | 清空后触发的回掉                                                  | -                    |