手写Vue个人组件库———fl-Cascader

接上文,封装了个人Vue组件库的Cascader级联选择器,源码附在了文章末尾,如下是文档使用说明

Cascader 级联选择器

当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

基础用法

只需为CascaderdataSource可渲染出一个级联选择器。
手写Vue个人组件库———fl-Cascader_第1张图片



禁用选项

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

手写Vue个人组件库———fl-Cascader_第2张图片



可清空

通过 clearable 设置输入框可清空

在这里插入图片描述



仅显示最后一级

可以仅在输入框中显示选中项最后一级的标签,而不是选中项所在的完整路径。

手写Vue个人组件库———fl-Cascader_第3张图片

属性showAll定义了是否显示完整的路径,将其赋值为false`则仅显示最后一级



可搜索

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

手写Vue个人组件库———fl-Cascader_第4张图片

设置avaSearch属性,即可开启搜索功能。



Attributes

参数 说明 类型 可选值 默认值
dataSource 用于展示的数据源 Array —— ——
disabled 是否禁用某一选项 boolean true / false false
clearable 是否支持清空选项 boolean true / false false
showAll 输入框中是否显示选中值的完整路径 boolean true / false false
avaSearch 是否支持搜索 boolean true / false false
change 最后一层节点被选中的回调,以数组返回三项 event —— ——

如对您有帮助,请多多关注,感谢支持!

你可能感兴趣的:(Vue组件库,前端,组件化,elementui,vue,vue.js)