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);
}