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. js遍历终极大法--再也不用苦逼的for循环了

    while循环 while后面跟循环条件和执行语句,只要满足条件,就会一直执行里面的执行 var i = 0 while(i<10){ console.log(i) i++ } do...whi ...

  2. 一份热乎的字节跳动客户端面经，已拿Offer

    字节面试过程: 4月4号进行内推,7天的简历评估,11号接到电话面试,尽管猝不及防回答仓促,但好在前期准备充分,通过.14号现场面试,次日收到通知,通过,二面.三面都很顺利.20号进行HR面,26号收 ...

  3. Docker小白到实战之开篇概述

    前言 "不对啊,在我这运行很正常啊",这句话小伙伴们在前几年应该听得很多:每次一到安装.部署时总有一堆问题,毕竟操作系统版本.软件环境.硬件资源.网络等因素在作怪,此时难免会导致开 ...

  4. Using Evernote with Wine on Mint

    Install Evernote Install Evernote in Wine: wine Evernote_xxx.exe; Backup Evernote Database File Loca ...

  5. 【Java】@Scheduled常用的注解的使用

    @Scheduled注解的使用 cron cron这个参数必须要接受一个cron表达式 cron表达式是个啥呢,Cron表达式是一个具有时间含义的字符串,字符串以5个空格隔开,分为6个域,格式为 X ...

  6. gcc limits.h的bug定位看include_next和默认搜索路径

    手编的交叉编译工具链经常报一堆宏未定义,例如下面是编译gtest的时候报_POSIX_PATH_MAX宏未定义,有时还会上报SSIZE_MAX等宏未定义: googletest/src/gtest-f ...

  7. CPU 指令环 ring0，ring1，ring2，ring3

    Intel的CPU将特权级别分为4个级别:RING0,RING1,RING2,RING3. Windows只使用其中的两个级别RING0和RING3,RING0只给操作系统用,RING3谁都能用.如果 ...

  8. Android模块化开发实践

    一.前言 随着业务的快速发展,现在的互联网App越来越大,为了提高团队开发效率,模块化开发已经成为主流的开发模式.正好最近完成了vivo官网App业务模块化改造的工作,所以本文就对模块化开发模式进行一 ...

  9. ESP32CAM 人脸识别追踪

    引言 总体实现的流程:ESP32cam作为客户端,pc作为服务端通过mqtt协议建立通信,将采集的图像在电脑端显示人脸识别的方法使用的是opencv,并通过mqtt传输指令给esp32cam控制舵机云 ...

  10. Semaphore 的使用

    var workerSemphore = new Semaphore(0, 800000); var IsWorkThreadCreated = true; var workThread = new ...