Vue ElementUI Tree结构实现懒加载案例

缺乏、安全感 2023-01-13 01:54 200阅读 0赞

官方文档比较全面，这里我就自己的实际开发提供一个案例，刚刚接触前端，不足之处，感谢指正  
[官方文档][Link 1]

<el-tree
      :props="props" //展示你的数据信息
      :load="loadNode" //与lazy配合使用
      lazy //开启懒加载
      show-checkbox  //是否开启复选框
      >
    </el-tree>

<script>
      export default { 
        data() { 
          return { 
            props: { 
              label: 'name',  //name 就是你自己想要在页面上展示的名称
              children: 'zones', 
              isLeaf: 'leaf' 
            },
          };
        },
        methods: { 
        	//懒加载数据实现方法
          loadNode(node, resolve) { 
            if (node.level === 0) {  //根节点
              return resolve([{  name: 'region' }]);
            }
            if (node.level > 1) return resolve([]);
    		//根节点下的子节点
            setTimeout(() => { 
              const data = [{ 
                name: 'leaf',
                leaf: true
              }, { 
                name: 'zone'
              }];
    
              resolve(data);
            }, 500);
          }
        }
      };
    </script>

我对上面案例中最重要的部分进行了说明，下面展示一下我的实际代码

<template>
      <div class="orgStruTree" style="background-color: #ffffff">
        <el-tree
          :props="props"
          ref="tree"
          node-key="orgId"
          class="margin-top10"
          show-checkbox
          highlight-current
          @node-click="handleNodeClick"
          lazy
          :load ="loadNode"
        ></el-tree>
      </div>
    </template>

<script>
    //axios 统一的api管理
    import {  orgInfoNext, orgInfoById,empInfoByOrgUuid } from "../api/api";
    
    export default { 
      name: "orgStruTree",
      data() { 
        return { 
         props: { 
              label: 'orgName', 
              children: 'child',
              isLeaf: 'leaf'
            },
        };
      },
      methods: { 
        //点击节点方法 这里可以不用，我是为了实现其他功能
         handleNodeClick(node,data) { 
                    console.log("点击树节点");
                    console.log(node);
                    console.log(data);
                    this.clickTree = data;
    
                  
                },        
        //懒加载方法
        loadNode(node,resolve){ 
          //根节点数据
          if(node.level === 0)
          { 
            let params = { 
               orgId : 1 
            };
            //向后台请求根节点数据
            orgInfoById(params).then(res => { 
              if(res.data.code == 200){ 
              //声明一个对象，用来接收根节点数据
              const data = res.data.result;
               return resolve([data]);
              }else { 
                this.$message({ 
                    message: res.data.message,
                    type: "error",
                  });
              }
            }).catch(res => { 
              resolve([]);
            });
          } else { 
          this.getChildsList(node,resolve);
          }
        },
        //获取加载不同的数据层 async采用异步方式
        async getChildsList(node,resolve) { 
          //查询当前组织的下级组织
          let params = { 
            orgId : node.data.orgId,
            };
            orgInfoNext(params).then((res) =>{ 
               if(res.code == 200){  
                 const data = res.result.object;
                 //将数据渲染到tree中
                 resolve(data); 
                 } else { 
                this.$message({ 
                    message: res.message,
                    type: "error",
                  });
              }
            }).catch(res =>{ 
              resolve([]);
            });
            
        }
        };
    </script>

[Link 1]: https://element.eleme.cn/#/zh-CN/component/tree

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3实现图片懒加载及自定义懒加载指令

Vue3实现图片懒加载及自定义懒加载指令前言 1.使用vue3-lazyload插件 2.自定义v-lazy懒加载指令 2.1 使用use

我会带着你远行/ 2023年10月14日 18:14/ 0 赞/ 95 阅读

相关 elementui tree懒加载更新问题

elementui tree懒加载实施更新问题新增同级新增下级删除点击最前方打开、收起上级按钮

淡淡的烟草味﹌/ 2023年01月17日 09:21/ 0 赞/ 219 阅读

相关 Vue ElementUI Tree结构实现懒加载案例

官方文档比较全面，这里我就自己的实际开发提供一个案例，刚刚接触前端，不足之处，感谢指正 [官方文档][Link 1] <el-tree :props=

缺乏、安全感/ 2023年01月13日 01:54/ 0 赞/ 201 阅读

相关 elementui中el-tree控件懒加载和局部刷新

懒加载按照 elementui官方文档示例，效果图 ![在这里插入图片描述][20210316101939378.gif] template部分，需要结合 `laz

怼烎@/ 2022年11月10日 03:46/ 0 赞/ 497 阅读

相关使用ElementUI做树形懒加载

原始表结构 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR

电玩女神/ 2022年09月12日 01:52/ 0 赞/ 232 阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 499 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 487 阅读

相关 vue elementUi tree 懒加载使用详情

背景： vue下使用elementUI 文档： [http://element-cn.eleme.io/\/zh-CN/component/tree\tree-s

太过爱你忘了你带给我的痛/ 2022年04月15日 03:53/ 0 赞/ 571 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 961 阅读

相关 vue中el-tree实现懒加载、动态增删改

在最近的一个项目中，有一个组织树的需求，因为数据量比较大，要求懒加载并且能够在树上对组织进行操作，项目使用的是vue+ElementUI。ElementUI中有个el-t...

系统管理员/ 2020年11月13日 18:57/ 0 赞/ 3936 阅读