基于el-cascader级联选择器实现只有最后一级可以多选(已发布到npm & github)

背景:

我们经常级联合选择器多选的需求,但是element UI提供的级联选择器并不能只多选最后一级,所以我考虑基于element UI的级联选择器优化一下,实现可以多选最后一级,并且尽量可以保留级联选择器原有功能。

DEMO地址:

https://heyu3913.github.io/el-cascader-onlylast-mutiple/dist/index.html

项目地址

https://github.com/heyu3913/el-cascader-onlylast-mutiple

使用方法:

  下载依赖
  npm i el-cascader-onlylast-mutiple -S
  引入依赖
  import Cascader from  'el-cascader-onlylast-mutiple'
  使用依赖 具体可看本项目中App.vue
   <Cascader></Cascader>

参数:

参数 说明 类型 可选值 默认值
visibleData 选中项绑定值 array - -
options 可选项数据源,键名可通过 Props 属性配置 array
size 尺寸 string medium / small / mini
placeholder 输入框占位文本 string - 请选择
disabled 是否禁用 boolean - false
clearable 是否支持清空选项 boolean - false
collapseTags 多选模式下是否折叠Tag boolean - false
showAllLeveles 是否仅在输入框显示最后一级 boolean - false
popperClass 自定义浮层类名 string - -
props 配置选项,具体见下表 object - -

props配置选项

参数 说明 类型 可选值 默认值
expandTrigger 次级菜单的展开方式 string click / hover 'click'
value 指定选项的值为选项对象的某个属性值 string 'value'
label 指定选项标签为选项对象的某个属性值 string 'label'
children 指定选项的子选项为选项对象的某个属性值 string 'children'
disabled 指定选项的禁用为选项对象的某个属性值 string 'disabled'

事件:

事件名称 说明 回调参数 使用方式
change 当选中节点变化时触发 选中节点的值
getCheckedNodes 获取选中的节点 节点的信息 组件配置ref;然后this.$refs.你配置的ref.getCheckedNodes() 触发

tips:

目前只兼容了以上属性与方法,别的element中原有的方法并没有测试过,可能会出现意想不到的错误。如果有需求可以联系我 vx: iverson96i

posted @ 2022-12-01 14:23  菜鸟小何  阅读(1011)  评论(0编辑  收藏  举报