介绍
级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.12 版本开始支持此组件。
引入
代码演示
基础用法
级联选择组件可以搭配 Field 和 Popup 组件使用，示例如下：
自定义颜色
通过 `active-color` 属性来设置选中状态的高亮颜色。
异步加载选项
可以监听 `change` 事件并动态设置 `options`，实现异步加载选项。
自定义字段名
通过 `field-names` 属性可以自定义 `options` 里的字段名称。
API
Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| title | 顶部标题 | string | - | |
| value | 选中项的值 | string 、 number | - | |
| options | 可选项数据源 | Option[] | [] | |
| placeholder | 未选中时的提示文案 | string | 请选择 | |
| active-color | 选中状态的高亮颜色 | string | #ee0a24 | |
| closeable | 是否显示关闭图标 | boolean | true | |
show-header v2.12.40 | 是否展示标题栏 | boolean | true | |
field-names v2.12.4 | 自定义 options 结构中的字段 | object | { text: 'text', value: 'value', children: 'children' } |
Events
| 事件 | 说明 | 回调参数 | |
|---|---|---|---|
| change | 选中项变化时触发 | { value, selectedOptions, tabIndex } | |
| finish | 全部选项选择完成后触发 | { value, selectedOptions, tabIndex } | |
| close | 点击关闭图标时触发 | - |
Slots
| 名称 | 说明 | 参数 | |
|---|---|---|---|
| title | 自定义顶部标题 | - | |
option v2.12.25 | 自定义选项文字 | { option: Option, selected: boolean } |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @cascader-header-height | 48px | - | |
| @cascader-title-font-size | @font-size-lg | - | |
| @cascader-title-line-height | 20px | - | |
| @cascader-close-icon-size | 22px | - | |
| @cascader-close-icon-color | @gray-5 | - | |
| @cascader-close-icon-active-color | @gray-6 | - | |
| @cascader-selected-icon-size | 18px | - | |
| @cascader-tabs-height | 48px | - | |
| @cascader-active-color | @red | - | |
| @cascader-options-height | 384px | - | |
| @cascader-tab-color | @text-color | - | |
| @cascader-unselected-tab-color | @gray-6 | - |
