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选中的效果。

代码实现

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

总结

坑已填完，但愿你们之后遇到这个问题能够很好的解决它。

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