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>
相关推荐
渣哥10 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
U.2 SSD28 分钟前
Echart仪表盘示例
javascript·echarts
qq_18417767729 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
Never_Satisfied36 分钟前
在JavaScript / HTML / Node.js中,post方式的Content-Type属性的text的三种编码
javascript·node.js·html
Never_Satisfied1 小时前
在JavaScript / HTML中,Chrome报错Refused to execute inline script
javascript·chrome·html
敲代码的嘎仔1 小时前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
Keepreal4961 小时前
pdf文件预览实现
javascript·react.js
Asort2 小时前
JavaScript设计模式(九)——装饰器模式 (Decorator)
前端·javascript·设计模式
Man2 小时前
🔥 Vue3 动态 ref 黑科技:一招解决 v-for 中的组件引用难题!
前端·vue.js
叫我少年2 小时前
Vue3 集成 VueRouter
vue.js