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. 2020年度钻石C++C学习笔记（1）《博学谷》

    1.C语言概述 1.1 什么是C语言 一提到语言这个词语,自然会想到的是像英语.汉语等这样的自然语言,因为它是人和人交换信息不可缺少的工具. 而今天计算机遍布了我们生活的每一个角落,除了人和人的相互交 ...

  2. vue页面初始化

    HTML: <div id="app"> <input type="" class="app" v-model=" ...

  3. 606页Android最新面试题含答案，助力成为offer收割机

    如何才能通过一线互联网公司面试?相信这是很多人的疑惑,希望看完本篇文章能给大家一些启发. 下面是我花了将近一个月的时间整理的一份面试题库.这些面试题,包括我本人自己去面试遇到的,还有其他人员去面试遇到 ...

  4. Android源码解析——Handler、Looper与MessageQueue

    本文的目的是来分析下 Android 系统中以 Handler.Looper.MessageQueue 组成的异步消息处理机制,通过源码来了解整个消息处理流程的走向以及相关三者之间的关系 需要先了解以 ...

  5. python中两种拷贝目录方法的比较

    首先是用python自己的api: shutil.copytree('./build/tested/doc', './build/tested/build/doc') 优点是改变平台时不需要修改代码, ...

  6. CD管理和检索软件比较

    之前一直用EverCD+,考虑到鸡蛋不能放在一个篮子里,又找了几款功能类似的进行了比较,主要考察一下几个功能: 多个镜像:一个数据文件可以包含多个目录的镜像,便于数据管理和搜索: 目录更新:目录内容发 ...

  7. K8S日志接入sls配置

    背景 原有日志方案查询日志很不方便且效率低,而且也不支持基于日志的高级操作.如:聚合,图形展示,关键字检测等. 方案 接入阿里云的sls日志服务. 实施 1.通过环境变量进行日志接入 配置如下: 字段 ...

  8. QT从入门到入土（八）——项目打包和发布

    引言 新手上路可谓是困难重重,你永远不知道下一个困难会在什么时候出现,在完成了运动控制卡封装发布过程中可谓是举步维艰.因此记录一下qt5+vs2019的打包发布方法. 打包一般分为两步: 将编译后的e ...

  9. NOIP 模拟 $13\; \text{玄学题}$

    题解 题如其名,是挺玄学的. 我们发现每个值是 \(-1\) 还是 \(1\) 只与它的次数是奇是偶有关,而 \(\sum_j^{j\le m}d(i×j)\) 又只与其中有多少个奇数有关 对于 \( ...

  10. 2018秋招C/C++面试题总结

    一.C和C++的区别是什么? C是面向过程的语言,C++是在C语言的基础上开发的一种面向对象编程语言,应用广泛.C中函数不能进行重载,C++函数可以重载C++在C的基础上增添类,C是一个结构化语言,它 ...