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 使用的效果就是:懒加载 ...
随机推荐
- 我的Android进阶之旅------>adbd cannot run as root in production builds 的解决方法
今天用adb root命令时候,报了错误:adbd cannot run as root in production builds C:\Documents and Settings\Administ ...
- Android系统移植与调试之------->Amlogic方案编译步骤
1. 拷贝Amlogic的SourceCode 切换目录到 /home/roco/work/amlogic/SourceCode/mx0831-0525下将mx0831-0525.tgz拷贝到 / ...
- Hexo+yilia博客添加背景音乐
个人主页:https://www.yuehan.online 现在博客:www.wangyurui.top 第一步: 打开网易云音乐的官网:https://music.163.com/ 第二步: 搜索 ...
- android学习一---搭建开发环境
android基于Java并运行Linux内核上的轻量级操作系统.由于是基于java的,学习起来也不是太难,对java有一定了解并知道一些基本的图形用户界面,入门就很简单了. 一.了解JDK ,SDK ...
- slf4j和log4j结合使用步骤
使用slf4j的优点: 提供带参数的日志输出方法(SLF4J 1.7及以后版本). pom中只需引入slf4j-log4j12,然后maven会引入它所依赖的其它JAR包. slf4j和log4j结合 ...
- MySQL中的DDL,DML
MySQL中的DDL,DMLDDL:数据定义语言: CREATE,ALTER,DROP DB组件:数据库.表.索引.视图.用户.存储过程.存储函数.触发器.事件调度器等 CR ...
- django 查询
mail = UserProfile.objects.get(email = email) get如果没有查询到会抛出一个不存在的异常 ...
- Meta 数据中文显示
class Meta:verbose_name='待办事项'verbose_name_plural = verbose_name这是什么意思? verbose_name指定在admin管理界面中显 ...
- 曾经遇到的坑------href="#"和href="javascript:void(0);"、href="javascript:;"
这个是为了 在点击此链接后回到页首,如果你写href="#"那么点击后会回到页首,这样影响操作. <a href="javascript:void 0" ...
- node+npm安裝配置
控制臺輸入node 根據提示安裝 sudo apt-get install -g npm配置淘寶源 npm config set registry https://registry.npm.tao ...