el-tree lazy懒加载(进阶版)

2023.12.22今天我学习了el-tree如何实现懒加载,效果如:

代码如下:

懒加载的使用不需要用:data

javascript 复制代码
<template>
   <div>
     <el-tree
         :props="props"
         :load="loadNode"
         lazy
         node-key="id"
         show-checkbox
     />
   </div>
</template>
<script>
export default{
  data(){
     return{ 
        props:{
          label:'label',//节点字段
          children:'children',//存放子节点数据字段
          isLeaf:'leaf',//判断节点是否还能展开true表示没有子节点,false表示还存在子节点
            }
         }
      },
     methods:{
        loadNode(node,resolve){
          //根据你el-tree有几层进行扩展
          //node表示选中节点数据,resovle表示总数据
          switch(node.level){
          case 0://初始默认节点
            return resolve(this.getZeroData(node));//对初始默认节点做处理
          case 1://一级节点
            return resolve(this.getFirstData(node));//对一级节点做处理
          case 2://二级节点
            return resolve(this.getSecondData(node));//对二级节点做处理
          default:
            return resolve([]);//返回空数组,注意:这个是必须要写的
            }
         },
        getZeroData(node){
               return [{id:1,label:'我是爷爷节点',leaf:fasle}]//node.data存放当前节点的数据
          },
        getFirstData(node){
            if(node.data.label=='我是爷爷节点'){
               return [{id:2,label:'我是爸爸节点',leaf:fasle}]//node.data存放当前节点的数据
             }else if(node.data.label=='我是外公节点'){
               return [{id:3,label:'我是妈妈节点',leaf:fasle}]//node.data存放当前节点的数据
             }
          },
        getSecondData(node){
               return [{id:4,label:'我是孩子节点',leaf:true}]//node.data存放当前节点的数据
          },
     }
}
</script>
相关推荐
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js