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

97z4moon 2021-07-27 10:56 原文

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 -

推荐阅读