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. CS229 斯坦福大学机器学习复习材料(数学基础) - 线性代数

    CS229 斯坦福大学机器学习复习材料(数学基础) - 线性代数 线性代数回顾与参考 1 基本概念和符号 1.1 基本符号 2 矩阵乘法 2.1 向量-向量乘法 2.2 矩阵-向量乘法 2.3 矩阵- ...

  2. 剑指 Offer 32 - II. 从上到下打印二叉树 II

    剑指 Offer 32 - II. 从上到下打印二叉树 II 从上到下按层打印二叉树,同一层的节点按从左到右的顺序打印,每一层打印到一行. 例如: 给定二叉树: [3,9,20,null,null,1 ...

  3. 多线程案例：龟兔赛跑-Race

    多线程案例:龟兔赛跑-Race 前置条件: 首先来个赛道距离,然后要离终点越来越近 判断比赛是否结束 打印出胜利者 龟兔赛跑开始 故事中是乌龟赢了,兔子需要睡觉,所以我们来模拟兔子睡觉 乌龟赢得比赛 ...

  4. Android 9.0 BufferSlot注解

    源码位置 /frameworks/native/libs/gui/include/gui/BufferSlot.h 源码 struct BufferSlot { BufferSlot() : mGra ...

  5. MySQL-20-MySQL优化

    MySQL优化哲学 1 为什么优化? 为了获得成就感? 为了证实比系统设计者更懂数据库? 为了从优化成果来证实优化者更有价值? 但通常事实证实的结果往往会和你期待相反!优化有风险,涉足需谨慎! 2 优 ...

  6. Java：导出Excel大批量数据的优化过程

    背景 团队目前在做一个用户数据看板(下面简称看板),基本覆盖用户的所有行为数据,并生成分析报表,用户行为由多个数据来源组成(餐饮.生活日用.充值消费.交通出行.通讯物流.交通出行.医疗保健.住房物业. ...

  7. 树莓派远程连接工具SSH使用教程

    树莓派远程连接工具SSH使用教程 树莓派 背景故事 树莓派作为一款迷你小主机,大部分的使用场景都会用到远程调试,远程调试用到最多的方式一般就是VNC和SSH,SSH就是命令行型的远程方式,简单来说就是 ...

  8. Beescms V4.0_R_20160525代码审计笔记

    写在前面 什么是报错注入?正常用户访问服务器发送id信息返回正确的id数据.报错注入是想办法构造语句,让错误信息中可以显示数据库的内容:如果能让错误信息中返回数据库中的内容,即实现SQL注入. 复现过 ...

  9. S3C2440—8.读写SDRAM

    文章目录 一.内部结构 二.相关寄存器 BWSCON BANKCON6 REFRESH BANKSIZE MRSR 三.读写SDRAM SDRAM:Synchronous Dynamic Random ...

  10. 11-SpringCloud Hystrix

    Hystrix简介 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败. 服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务 ...