vue树形结构懒加载

一、前段代码

1、html

<el-tree :data="treeData"
                    :props="defaultProps"
                    :load="loadNode"
                    @node-click="handleNodeClick"
                    lazy
          >
          </el-tree>

2.data中：

treeData: [],
    defaultProps: {
      children: 'children',
      label: 'organizationName',
      orgCode: 'orgCode',
      parentCode: 'parentCode',
      isLeaf: false // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
    },

3.script中：

​
   loadNode(node, resolve) {        // 加载 树数据
     let that = this;
     if (node.level === 0) {
       that.loadtreeData(resolve);
    }
     if (node.level >= 1) {
         //这里的node可以获取到当前节点的所有数据,node.data.orgCode就是拿到当前节点的orgCode
       this.getChildByList(node.data.orgCode, resolve);
       console.log('node',node)
       return resolve([]); // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
    }
  },
// 获取loadtreeData 就是父节点数据，getChildByList就是异步获取子节点数据
   loadtreeData( resolve) {      
       //parentCode =0 查找到所有的一级菜单
     let params = {'parentCode' : 0};
       //获取树的接口
     systemManage.getOrganizationTreeList(params).then(res =>{
         let data = res.data;
         // 前者item.参数名称为 prop中的规定的属性名称
         data.forEach(item => {
           this.defaultProps.organizationName = item.organizationName;
           this.defaultProps.parentCode = item.parentCode;
           this.defaultProps.orgCode = item.orgCode;
           this.defaultProps.isLeaf = true;
        });
         resolve(data)
​
    }).catch(err =>{
       console.log(err);
    });
  },
       // 获取子节点请求
   getChildByList( orgCode,resolve) { 
       
     let params = {
       'parentCode' : orgCode};
     systemManage.getOrganizationTreeList(params).then(res =>{
         let data = res.data;
         data.forEach(item => {
           this.defaultProps.organizationName = item.organizationName;
           this.defaultProps.parentCode = item.parentCode;
           this.defaultProps.orgCode = item.orgCode;
           this.defaultProps.isLeaf = false;
        });
         resolve(data);
    }).catch(err =>{
       console.log(err);
    });
  },
   handleNodeClick(node) { // 节点被点击时的回调
  },

二、后段代码

1、Controller层

  /**
   * 获取机构树形结构
   **/
   @PostMapping("/getOrganizationTreeList")
   @ResponseBody
   public Result getOrganizationTreeList(@RequestBody DimensionEntity dimensionEntity) {
       List<OrganizationBase> organizationBases = organizationBaseService.listWithTree(dimensionEntity.getParentCode());
       return ok(organizationBases);
  }

2、service

public interface OrganizationBaseService extends IService<OrganizationBase> {
​
   List<OrganizationBase> listWithTree(String parendCode);
​
}

3、serviceImpl

@Component
public class OrganizationBaseServiceImpl extends ServiceImpl<OrganizationBaseMapper, OrganizationBase> implementsOrganizationBaseService {
​
   @Resource
   private  OrganizationBaseMapper organizationBaseMapper;
​
   @Override
   public List<OrganizationBase> listWithTree(String parentCode) {
​
       List<OrganizationBase> organizationBases = organizationBaseMapper.getList(parentCode);
//       List<OrganizationBase> organizationBases = baseMapper.selectList(null);
       return  organizationBases.stream()
               //查找到所有传过来的一级菜单
              .filter(org -> org.getParentCode().equals(parentCode))
              .map(org ->{
                org.setChildren(getChildren(org,organizationBases));
                return org;
              }).collect(Collectors.toList());
​
  }
   /**
    * 递归获取子菜单
    *
    */
   public List<OrganizationBase> getChildren(OrganizationBase o,List<OrganizationBase> all){
       List<OrganizationBase> children =  all.stream()
              .filter(org -> org.getParentCode().equals(o.getOrgCode()) )
              .map((org) ->{
                   org.setChildren(getChildren(org,all));
                   return org;
              }).collect(Collectors.toList());
       return children;
  }
}

4、mapper

@Component
public interface OrganizationBaseMapper extends BaseMapper<OrganizationBase> {
​
   @Select({"select * from system_organization_base where parent_code =#{parentCode}"})
   List<OrganizationBase> getList(@Param("parentCode") String parentCode);
}