cascader 级联选择器组件源码简单分享,主要从以下几个方面:
1、cascader 组件页面结构。
2、cascader 组件属性。
3、cascader 组件方法。
4、cascader slot 挂载。
一、组件页面结构。

二、组件属性。
2.1 value / v-model 选中项绑定值。



2.2 options 可选项数据源,键名可通过 Props
属性配置,类型为 array,无默认值。






2.3 props 配置选项,类型为 object,无默认值。



















2.4 size 尺寸,类型为 string,可选值 medium / small / mini,无默认值。



2.5 placeholder 输入框占位文本,类型为 string,默认值 请选择。



2.6 disabled 是否禁用,类型为 boolean,默认值 false。



2.7 clearable 是否支持清空选项,类型为 boolean,默认值 false。





2.8 show-all-levels 输入框中是否显示选中值的完整路径,类型为 boolean,默认值 true。











2.9 collapse-tags 多选模式下是否折叠 Tag,类型为 boolean,默认值 false。



2.10 separator 选项分隔符,类型为 string,默认值 斜杠 '/'。






2.11 filterable 是否可搜索选项,类型为 boolean,无默认值。









2.12 filter-method 自定义搜索逻辑,第一个参数是节点node
,第二个参数是搜索关键词keyword
,通过返回布尔值表示是否命中,类型为 function(node, keyword),无默认值。



2.13 debounce 搜索关键词输入的去抖延迟,毫秒,类型为 number,默认值 300。


2.14 before-filter 筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选,类型为 function(value),无默认值。



2.15 popper-class 自定义浮层类名,类型为 string,无默认值。



三、组件方法。
3.1 change 当选中节点变化时触发,回调参数为选中节点的值。

3.2 expand-change 当展开节点发生变化时触发,回调参数为各父级选项值组成的数组。

3.3 blur 当失去焦点时触发,回调参数为 (event: Event)。

3.4 focus 当获取焦点时触发,回调参数为 (event: Event)。

3.5 visible-change 下拉框出现/隐藏时触发,回调参数为 (event: Event)。

3.6 remove-tag 在多选模式下,移除Tag时触发,回调参数为 移除的Tag对应的节点的值。

3.6 getCheckedNodes 获取选中的节点,回调参数为 (leafOnly) 是否只是叶子节点,默认值为 false。


四、组件 slot 挂载。
4.1 - 自定义备选项的节点内容,参数为 { node, data },分别为当前节点的 Node 对象和数据。


4.2 empty 无匹配选项时的内容。

