el-tree lazy懒加载（进阶版）

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

代码如下：

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

<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>