记element-ui树形控件懒加载实现

概要

如何通过vue2+element-ui实现树形控件的懒加载

整体架构流程

1.树形控件的组件代码

复制代码
            <el-tree
              :data="treeData"
              :props="defaultProps"
              :load="load"
              lazy
              @current-change="handleNodeClick"
              :expand-on-click-node="true"
              :highlight-current="true"
              ref="tree"
              node-key="id"
            >
              <span class="custom-tree-node" slot-scope="{ data }">
                <span>{{ data.name}}</span>
              </span>
            </el-tree>

2.加载子树数据的方法

复制代码
 async loadNode(node, resolve) {
      if (node.level == 0) {
        //若根目录的接口和子节点数据不同则需要加判断
      } else {
        let arr = [];
        arr = node.data.fathers;
        let treeData = await this.getTreeAction();
        return resolve(treeData);
      }
    },

3.子节点接口

复制代码
 getTreeAction(arr, nextLayerIsVariable) {
      return new Promise((resolve, reject) => {
        resolve(data);
        //data是通过后端接口获取到的数据            
      });
    },

小结

记一次加载element-ui树形控件的实现方式

相关推荐
掘金安东尼6 分钟前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试
喝养乐多长不高16 分钟前
详细PostMan的安装和基本使用方法
java·服务器·前端·网络协议·测试工具·https·postman
阿珊和她的猫36 分钟前
React 与 Vue 的区别:你会选择哪个框架呢
前端·vue.js·react.js
尖椒土豆sss38 分钟前
Nuxt3框架入门:第一个简单demo
前端·nuxt.js
浪裡遊42 分钟前
前端高频面试题day2
前端·javascript·vue.js
独立开阀者_FwtCoder44 分钟前
Vue3 首款 3D 数字孪生编辑器 正式开源!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 78 期 - React Compiler RC、Trae MCP、pnpm 10.9...
前端·javascript·trae
神秘代码行者1 小时前
使用Hash和HTML5的History API实现前端路由
前端·html5
小妖6661 小时前
用 Nodemon 解决 npm run serve 频繁重启服务
前端·npm·node.js