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

2023-12-22 13:11:02

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>

文章来源:https://blog.csdn.net/qq_53986004/article/details/135148239
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。