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. 在Java开发工具的project中使用相对路径

    1.在project中,相对路径的根目录是project的根文件夹,在此就是repathtest文件夹了.创建文件的写法是: File f = new File("src/com/lavas ...

  2. BUUCTF-[网鼎杯 2018]Fakebook(SSRF+联合注入绕Waf)

    记一道SSRF配合SQL注入的题. 喜欢在做题之前扫一下网站的目录,扫到了robots.txt文件可以访问,拿到user.php.bak的源码.同时还有flag.php. <?php class ...

  3. 分时函数 & 节流函数

    分时函数 & 节流函数 1.函数节流 JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合 理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下 ...

  4. 【SpringBoot技术专题】「JWT技术专区」SpringSecurity整合JWT授权和认证实现

    JWT基本概念 JWT,即 JSON Web Tokens(RFC 7519),是一个广泛用于验证 REST APIs 的标准.虽说是一个新兴技术,但它却得以迅速流行. JWT的验证过程是: 前端(客 ...

  5. JSON.stringify()的用法

    **JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串,而我们一般只是用了第一个参数,没有在意过第二个以及第三个参数的妙用** **1.最常用的方式:** ...

  6. SpringBoot-静态资源加载-源码

    目录 静态资源映射规则 什么是webjars 呢? 第二种静态资源映射规则 参考链接 静态资源映射规则 SpringBoot中,SpringMVC的web配置都在 WebMvcAutoConfigur ...

  7. 不懂Ribbon原理的可以进来看看哦，分析RibbonClientConfiguration完成了哪些核心初始操作

      本文在前一篇文章的基础上来继续分析Ribbon的核心内容. 不懂Ribbon原理的可以进来看看哦,分析SpringBoot自动装配完成了Ribbon哪些核心操作 RibbonClientConfi ...

  8. ☕【Java技术指南】「并发原理专题」AQS的技术体系之CLH、MCS锁的原理及实现

    背景 SMP(Symmetric Multi-Processor) 对称多处理器结构,它是相对非对称多处理技术而言的.应用十分广泛的并行技术. 在这种架构中,一台计算机由多个CPU组成,并共享内存和其 ...

  9. 数据结构与算法-排序（八）计数排序（Counting Sort）

    摘要 计数排序本质就是统计不同元素出现的次数,然后将元素依次从小到大放置,每个元素看统计的次数,就紧挨着放置几个同样的元素. 看似简单的处理,在算法中,会依据统计的元素次数推算出每个元素的索引位置,这 ...

  10. 题解 P3317 [SDOI2014]重建

    题解 前置芝士:深度理解的矩阵树定理 矩阵树定理能求生成树个数的原因是,它本质上求的是: \[\sum_T \prod_{e\in T} w_e \] 其中 \(w_e\) 是边权,那么我们会发现其实 ...