Element-ui 级联选择器组件功能扩展

5,799 阅读1分钟

上周,在开发过程中碰见一个需求,总结一下就是:在使用Element-ui级联选择器组件的时候,数据既要懒加载,又能单击选中任意一项。

刚开始我还不以为意,认为是个很简单的需求,信誓旦旦的和产品经理说保证完成任务。

在我吭哧吭哧写完懒加载功能的时候,发现只能选中最后一项!顿时我就有点慌了,一查文档,发现懒加载触发事件active-item-change仅在 change-on-select(是否允许选择任意一级的选项) 为 false 时可用。

然后就开启了我的填坑之旅...

问题描述

在使用Element-ui级联选择器组件的时候,如果使用了懒加载功能,就不能单击选中任意一项。

解决思路

利用elementUI提供的active-item-change事件获取当前的选择的路径数组pathArray。 通过绑定当前事件,构造出select(item,menuInde​​x)需要的数据结构:
item:{
  value: 1,
  label: "vae"
}
menuIndex = pathArray.length - 1

这就可以实现hover展开,click选中的效果。

代码实现

template.png

methods.png

注:"element-ui": "^2.4.11"

总结

坑已填完,希望大家以后遇到这个问题可以很好的解决它。

后记: 小伙伴们,如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果觉得本文还不错,记得点个赞哦! 本文首发地址为: Vae's Blog