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 -

Element UI：级联选择器Cascader_动态加载_多级请求不同接口（已知第一级调取第二级）的更多相关文章

  1. Unity 5.x动态加载光照信息（所有坑已踩）

    能搜到这的应该是被新的烘焙系统坑了少时间,4.x到5.x美术必须重新烘焙,关于美术的没什么说的,只有---重新烘焙! 新的烘焙系统,为了兼容5.x的多场景编辑功能,将烘焙信息从mesh全部挪到了一个中 ...

  2. 4_爬NMPA药监总局_动态加载_传ID

    http://scxk.nmpa.gov.cn:81/xk/ import requests url = 'http://scxk.nmpa.gov.cn:81/xk/itownet/portalAc ...

  3. 两种动态加载JavaScript文件的方法

    两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...

  4. 动态库DLL加载方式-静态加载和动态加载

    静态加载: 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib ...

  5. java中的动态加载和热替换

    https://blog.csdn.net/u010833547/article/details/54312052 ****************************************** ...

  6. [转]动态加载javascript

    动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码. 第二种是,动态创建一个script标签,设置其 ...

  7. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

  8. Vue + Element UI 实现权限管理系统 前端篇（十）：动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  9. Vue + Element UI 实现权限管理系统（动态加载菜单）

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

随机推荐

  1. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  2. 我，Android开发5年，32岁失业，现实给我狠狠上了一课！

    如今的职场,风险是越来越高,不管你是应届生或者你是否中年,遇到好点的企业,红火那么做个三五年,运气不好,半年甚至2.3个月也就玩完了. 所以,即使你希望工作能稳定,但也会让你大失所望,职场寿命就那么几 ...

  3. Linux常见问题解决方案

    1.Kali2020添加BCM43142的网卡驱动 来源:https://www.fujieace.com/kali-linux/wifi-drive.html 我只是执行了第三步:安装网卡驱动,即: ...

  4. 【网络编程】TCPIP_1_快速入门

    目录 前言 1. 快速入门 1.1 服务端编程简要步骤 1.2 客户端编程简要步骤 1.3 参考 前言 说明: demo 基于 Linux. 1. 快速入门 以下步骤简略了很多细节,但是通过下面的几个 ...

  5. 终极蛇皮上帝视角之铁头娃之鲁迅之暑假闲的慌之bilibili看尚学堂网课的非洲酋长java小复习

    转自https://www.sxt.cn/Java_jQuery_in_action/eight-cache-problem.html 第一个点 自动装箱与拆箱的功能是所谓的"编译器蜜糖(C ...

  6. IDEA远程调试代码

    一.设置远程调式端口 点击Remote 设置名字和要部署的远程服务器IP地址和端口 二.将Jar包上传到远程服务器运行 启动命令 java -Xdebug -agentlib:jdwp=transpo ...

  7. C#中的几种锁：用户模式锁、内核模式锁、动态计数、监视锁

    参考网址: https://blog.csdn.net/weixin_43989331/article/details/105356008 C#中的几种锁:用户模式锁.内核模式锁.动态计数.监视锁介绍 ...

  8. [ASP.NET MVC]@RenderSection，@RenderBody()，@RenderPage

    1.@RenderBody()  作用和母版页中的服务器控件类似,当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之 ...

  9. 如何从 vue-element-admin 迁移到 Fantastic-admin

    // FIXME 链接更新 如果你还不知道 Fantastic-admin 是什么,那么我先用几张预览图给大家了解一番. 看来预览图,如果你感兴趣,可以点这里来详细了解并试用,这是一款完成度极高,开箱 ...

  10. redis rpoplpush列表转移元素

    文档出处:redisdoc.com/list/rpoplpush.html模式: 安全的队列 Redis的列表经常被用作队列(queue),用于在不同程序之间有序地交换消息(message).一个客户 ...