Element UI:级联选择器Cascader_动态加载_多级请求不同接口(已知第一级调取第二级)


ELEMENT UI_CASCADER

使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数。

当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第一个结点的value入参调取第二级菜单。

将第一级结点的data写入options,将含有lazyLoad函数的data写入props,发现lazyLoad由于第一级结点由于不存在value而打印报错,点击后则能正常渲染二级选项。

将Axios置换为setTimeout无差别返回,会发现一级options也返回了lazyLoad中的结点,因此想要解决这个问题还要从lazyLoad根本解决。

LAZYLOAD

首先探究这个函数的执行机制,当页面渲染级联选择器时,lazyLoad被执行,抛出的参数从空对象注入数据为:

可以将其理解为初始化的一个过程,在选择一级菜单的一个options后再次打印node:

于是我们可以通过node.level判断当前活动node是第几级菜单,从而给出不同的resolve处理

或者通过node.data来判断是否为初始化,通过children判断它是否存在下级菜单。

这段代码简单实现了上一节提到的需求,这方面的可扩展性还是很好的。

- END -


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM