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

上周，在开发过程中碰见一个需求，总结一下就是：在使用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选中的效果。

代码实现

总结

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

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

转载于:https://juejin.im/post/5c6a73b8e51d457fc605f44d