element-ui树结构懒加载
在实际项目中,往往树结构数据量较大,这时树节点必须懒加载
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树结构懒加载的更多相关文章
- iOS开发UI篇—懒加载
iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
- iOS开发UI中懒加载的使用方法
1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其getter方法.说的通俗一点,就是在开发中,当程序中需要利用的资源时.在程序启动的时候不加载 ...
- iOS开发——UI基础-懒加载,plist文件,字典转模型,自定义view
一.懒加载 只有使用到了商品数组才会创建数组 保证数组只会被创建一次 只要能够保证数组在使用时才创建, 并且只会创建一次, 那么我们就称之为懒加载 lazy - (void)viewDidLoad 控 ...
- UI篇—懒加载
1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 ...
- 35、element ui tab切换加载echarts不显示或显示不全问题解决:
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card ...
- element table组件懒加载
directives : { loadmore : { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body ...
- iOS开发基础-图片切换(4)之懒加载
延续:iOS开发基础-图片切换(3),对(3)里面的代码用懒加载进行改善. 一.懒加载基本内容 懒加载(延迟加载):即在需要的时候才加载,修改属性的 getter 方法. 注意:懒加载时一定要先判断该 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
随机推荐
- ERROR 1396 (HY000): Operation CREATE USER failed for 'root'@'localhost'
安装ranger时MySQL报错,查看MySQL数据库,发现host=localhost这一列被删除了,插入这一列就好了,具体操作如下: 解决办法: 进入MySQL数据库 use mysql: &qu ...
- Amazon2014在线笔试 第三题
问题描述: 算法分析: s1:层数对齐:分别求两个数所在的层(l1,l2),把层数大的(假设l2>l1)先往上找父节点,从而对齐到l1层: s2:两个数同时往上找, 直到找到公共的父节点(一定能 ...
- 《UNI|X环境高级编程》 源代码配置
代码下载地址:http://www.apuebook.com/ 下的第二版,里面有个readme文件: root@iZ23onhpqvwZ:~/ms/linux/apue/apue.2e# cat R ...
- 前端基础之jquery_mouse相关操作与不同
jquery中mouse相关操作与不同 mousedown() //当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件 mouseup() //当鼠标指针移动到元素上方,并松 ...
- Video标签的使用
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- js判断有无属性
访问元素属性 getAttribute 不存在返回null,特性名可不区分大小写 dom对象访问公共属性,自定义属性不能访问,div.id 访问对象属性 1.使用in关键字 该方法可以判断对象的自有属 ...
- [原创]spring及springmvc精简版--AOP
接上一篇:[原创]spring及springmvc精简版--IOC 理解AOP.java是一种面向对象的语言.而AOP是面向切面,在我看来是面向逻辑或者业务编程,它是对一组逻辑的抽象和分配. 经典例子 ...
- Centos系统 上下文切换的检查思路
1.什么是上下文切换(Context Switch)? 上下文切换,有时也称做进程切换或任务切换,是指CPU从一个进程或线程切换到另一个进程或线程. 操作系统可以同时运行多个进程, 然而一颗CPU同时 ...
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- 20145240 《Java程序设计》第五次实验报告
20145240 <Java程序设计>第五次实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1452 指导教师:娄嘉鹏 实验日期:2016.05.06 实验 ...