elementUi cascader 级联动组件 hover 收起二级菜单

       最近一直和这个组件打交道, 有多个地方不太完美, 一开始领导让先这么用着, 后期再优化. 最近把几个不完美的地方优化了下. 写下此篇. 让遇到此问题的朋友少走类似的弯路.

       先简单说下问题, 这个组件默认是点击option, 下拉框就隐藏. 但当我们开启了触发方式为hover的时候, 也就是expandTrigger: 'hover' 的时候. 这个时候点击option就不会隐藏, 毕竟组件没那么智能, 这时候需要自己手动处理隐藏.我公司目前的做法是无论点击一级二级option都隐藏.毕竟触发已经改成了hover.这个逻辑是没问题的.具体隐藏下拉框的方法是:

       this.$refs.cascaderDom.dropDownVisible = false;

       当然你要在cascader上加上     ref='cascaderDom'

       我们输出下访问到的这个dom对象, 一看你就知道了.

dropDownVisible就是控制下拉框的显隐啦; true为显示, false为隐藏;

 

        ok, 这个问题解决后, 还有个更棘手的问题.就是开启hover后鼠标在一级菜单上下hover触发的时候, 如果某一级菜单没有二级菜单分类, 那么需要隐藏掉二级菜单.  但是官方是默认不隐藏的. 这样体验就不要. 所以还是需要改动.总之就是hover触发一级菜单的时候 , 如果此时有二级菜单那么就显示二级菜单, 否则就隐藏二级菜单. 得益于领导的指导, 也算成功实现了.具体的方法如下:

       在mounted的时候 先获取el-cascader-node元素集合. 然后循环给每个option加商onmouseent