# Cascader 级联

# Cascader 概述

从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。相比 Select 组件，可以一次性完成选择，体验更好。

# Cascader 代码演示

# 基础用法

级联选择对数据有较严格要求，请参照示例的格式使用 data，每项数据至少包含 value、label 两项，子集为 children，以此类推。
value 为当前选择的数据的 value 值的数组，比如 ['beijing', 'gugong'] ，按照级联顺序依次排序，使用 v-model 进行双向绑定。

# 多选

可以通过设置 multiple=true 来开启多选模式。

# 默认值

指定 value 默认值，组件会在初始化时选定数据。
属性 placeholder 输入框占位符，输入框为空时显示该值,默认显示请选择。

# 移入展开

设置属性 trigger 为 hover，当鼠标悬停时就会展开子集。
次级菜单展开方式，可选值为 click 或 hover。

# 是否支持清除

设置属性 clearable 可以禁用组件。默认支持清除。

# 禁用

设置属性 disabled 可以禁用组件。
给某项数据设置 disabled: true 可以禁用某一项。

# 点选每级菜单选项值都会发生变化

设置属性 change-on-select 点任何一级都可以选择。

# 自定义已选项

对于显示的结果，可以通过 render-format 接收一个函数来自定义。
其中第一个参数 labels 是当前选择的label的集合，第二个参数 selectedData 是当前选择的数据集合，可以利用它们组合出你想要显示的内容。

# 尺寸

通过设置 size 属性为 large 和 small 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。

# 动态加载选项

使用 load-data 属性可以异步加载子选项，需要给数据增加 loading 来标识当前是否在加载中。
load-data 的第二个参数为回调，如果执行，则会自动展开当前项的子列表。

# 搜索

使用属性 filterable 可直接搜索选项并选择。支持模糊搜索
暂不支持服务端搜索。
not-found-text 当搜索列表为空时显示的内容。

# 自定义显示

通过设置 slot 可以自定义显示内容，不局限于输入框。
设置 on-change 事件,选择完成后的回调，返回值为：value，selectedData。
设置 on-visible-change 事件：展开和关闭弹窗时触发。

# Cascader API

# Cascader props

属性	说明	类型	默认值
data	可选项的数据源，格式参照示例说明 `建议：涉及到多选级联组件的，不能复用同一个data`	Array	[]
value	当前已选项的数据，格式参照示例说明	Array	[]
render-format	选择后展示的函数，用于自定义显示格式	Function	label => label.join(' / ')
disabled	是否禁用选择器	Boolean	false
clearable	是否支持清除	Boolean	true
placeholder	输入框占位符	String	请选择
trigger	次级菜单展开方式，可选值为 `click` 或 `hover`	String	click
change-on-select	当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例(多选暂不支持)	Boolean	false
size	输入框大小，可选值为 `large` 和 `small` 或者不填(不同size需要进行相应配置)	String	-
load-data	动态获取数据，数据源需标识 loading 注意：单选异步请求获取回显值 `this.$refs.cascader.displayInputRender`	Function	-
filterable	是否支持搜索 (多选暂不支持)	Boolean	false
not-found-text	当搜索列表为空时显示的内容	String	无匹配数据
transfer	是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果	Boolean	false
multiple	是否开启多选 (v1.0.42)	Boolean	false
initDataMultiple	支持异步数据请求。多选条件下时(loadData, multiple)，支持初始化回显 (v1.0.64), `this.$refs.xxxxx.multipleValue.map(v => v.label)` 获取回显的数据。注：loadData 函数里面的数据格式要严格按照要求	Boolean	false
loading	当前是否正在远程搜索 (v1.0.86)	Boolean	false
loading-text	远程搜索中的文字提示 (v1.0.86)	String	加载中
isInnerOverflow	cascader组件下拉面板右侧空间不够时，滚动条显示在下拉面板内部而不是显示在页面底部(v1.2.2)	Boolean	false

# Cascader events

事件名	说明	返回值
on-change	选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据	value, selectedData
on-visible-change	展开和关闭弹窗时触发	显示状态，Boolean
on-remove-tag	移除多选选中项时触发 (v1.0.42)	移除项的value
on-focus	聚焦时触发 (v1.0.49)	-
on-blur	失焦时触发 (v1.0.49)	-