在实际项目中,往往树结构数据量较大,这时树节点必须懒加载

element-ui树的懒加载:

<div style="width:100%;height:420px;overflow: auto;">
<el-tree lazy :load="getOrgList" :props="defaultProps" highlight-current @node-click="handleNodeClick">
</el-tree>
</div>

js代码如下:

defaultProps: {
children: "children",
label: "name"
},

树节点形式为:

 [
{
"id": "1",
"name": "国家电网",
"status": null,
"isCheck": null,
"children": []
}
]

getOrgList方法如下:

/**
* 懒加载树获取组织机构子节点
* element-tree使用方法
* @param node:当前点击节点信息
* @param resolve:传递参数方法
* */
getOrgList(node,resolve) {
/*this.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`)
.then((response) => {
this.data2 = response.data.data;
})
.catch(function (error) {
console.log(error);
});
*/
let self = this;
console.log(node);
if(node.level == 0){
self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`).then(res => {
let treeData = []
res.data.data.forEach(e => {
treeData.push(e)
})
resolve(treeData);
}).catch(res => {
resolve([]);
})
}else{
console.log("当前节点id值为:"+node.data.id)
self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall/${node.data.id}`).then(res => {
let myList = [];
res.data.data.forEach(e => {
myList.push(e)
})
resolve(myList);
}).catch(res => {
resolve([]);
}) } },

handleNodeClick方法如下:

                        // 点击树
handleNodeClick(data) {
console.log("点击树节点");
console.log(data);
this.clickTree = data;
},

element-ui树结构懒加载的更多相关文章

  1. iOS开发UI篇—懒加载

    iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...

  2. iOS开发UI中懒加载的使用方法

    1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其getter方法.说的通俗一点,就是在开发中,当程序中需要利用的资源时.在程序启动的时候不加载 ...

  3. iOS开发——UI基础-懒加载,plist文件,字典转模型,自定义view

    一.懒加载 只有使用到了商品数组才会创建数组 保证数组只会被创建一次 只要能够保证数组在使用时才创建, 并且只会创建一次, 那么我们就称之为懒加载 lazy - (void)viewDidLoad 控 ...

  4. UI篇—懒加载

    1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 ...

  5. 35、element ui tab切换加载echarts不显示或显示不全问题解决:

    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card ...

  6. element table组件懒加载

    directives : { loadmore : { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body ...

  7. iOS开发基础-图片切换(4)之懒加载

    延续:iOS开发基础-图片切换(3),对(3)里面的代码用懒加载进行改善. 一.懒加载基本内容 懒加载(延迟加载):即在需要的时候才加载,修改属性的 getter 方法. 注意:懒加载时一定要先判断该 ...

  8. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  9. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

随机推荐

  1. HDU 4193 Non-negative Partial Sums(单调队列)

     题目大意: 给定一个长度为n的循环序列.从n个不同位置開始,问有几个位置使得一下情况成立:全部前缀的和都大等于0(n <=1000000). 下午的训练赛.之前没学过单调队列所以用的线段树 ...

  2. 给俺的 CSDN 博客加背景音乐 - 高大尚的《心经》背景音乐

    给俺的 CSDN 博客加背景音乐 - 高大尚的<心经>背景音乐 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途- ...

  3. win7与win server 2008防火墙设置

    转自:http://blog.51cto.com/jimshu/590411 Windows 防火墙通过阻止未授权用户通过 Internet 或网络访问您的计算机来帮助保护计算机. Windows 2 ...

  4. Debussy的安装与使用

    1.概述 Debussy是NOVAS Software, Inc ( 思源科技 )发展的HDL Debug & Analysis tool,这套软体主要不是用来跑模拟或看波形,它最强大的功能是 ...

  5. Summaries On Java

    @1:== 和 equals(): ==用于比较引用和比较基本数据类型时具有不同的功能: 比较基本数据类型:如果两个值相同,则结果为true. 比较引用:如果引用指向内存中的同一对象,结果为true( ...

  6. iOS警告框和操作表

    应用如何与用户交流呢? 警告框(AlertView)和操作表(ActionSheet)就是为此而设计的. 本文案例的原型草图如图3-48所示,其中有两个按钮“Test警告框”和“Test操作表”,点击 ...

  7. MySQL忘记密码的正确解决方法

    MySQL忘记密码解决方案:破解本地密码: Windows: 1.用系统管理员登陆系统. 2.停止MySQL的服务. 3.进入命令窗口,然后进入 MySQL的安装目录,比如我的安装目录是c:\mysq ...

  8. 前端基础之JavaScript_(4)_js的作用域

    js作用域 作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. js的作用域 1. 全局作用域(Glob ...

  9. css position absolute 浮动特性

    absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...

  10. Class文件结构(更新中)

    Class文件是一组以8位字节为单位的二进制流,当遇见需要占用8位字节以上空间的数据项时,则会按照高位在前的方式分割成若干个8位字节进行存储. 格式,采用伪结构,只有两种数据结构:无符号数和表. 无符 ...