字典表+SpringBoot+ElementUI(el-tree树形控件)实战

《字典表》https://blog.csdn.net/qq_33429583/article/details/81530089https://blog.csdn.net/qq_33429583/article/details/81530089

1.定义字典表数据模型（以组织为例，一级组织，二级组织，以此类推）

import java.util.List;

public class Organization {

    private Integer id;
    private String label;
    private Integer parentId;
    private List children;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getLabel() {
        return label;
    }

    public void setLabel(String label) {
        this.label = label;
    }

    public Integer getParentId() {
        return parentId;
    }

    public void setParentId(Integer parentId) {
        this.parentId = parentId;
    }

    public List getChildren() {
        return children;
    }

    public void setChildren(List children) {
        this.children = children;
    }

}

2.根据数据模型设计数据字典表

   根据字典表设计文章与上面数据模型即可设计出简单的SQL字典表。

DROP TABLE IF EXISTS `organization`;
CREATE TABLE `organization` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `label` varchar(32) NOT NULL COMMENT '组织名称',
  `parent_id` int(11) NOT NULL DEFAULT '0' COMMENT '组织的上级组织id，默认0代表此组织无上级组织',
  `desc_info` varchar(128) DEFAULT NULL COMMENT '组织描述',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=43 DEFAULT CHARSET=utf8 COMMENT='组织信息';

3.编写后端接口查询字典表数据并转换为el-tree树形控件所匹配的数据模型

public List transformTreeOrganizations(List organizations) {
        List rootTreeOrganizations = new ArrayList<>();
        for (Organization organization : organizations) {
            if (organization.getParentId() == 0) {
                organization.setChildren(new ArrayList<>());
                rootTreeOrganizations.add(organization);
            }
        }
        for (Organization treeOrganization : rootTreeOrganizations) {
            findTreeOrganizations(treeOrganization, organizations);
        }
        return rootTreeOrganizations;
    }

    private void findTreeOrganizations(Organization treeOrganization, List organizations) {
        List childOrganizations = getChildOrganizations(organizations, treeOrganization.getId());
        if (childOrganizations.size() > 0) {
            treeOrganization.setChildren(childOrganizations);
            for (Organization childOrganization : childOrganizations) {
                findTreeOrganizations(childOrganization, organizations);
            }
        }
    }

    private List getChildOrganizations(List organizations, Integer id) {
        return organizations.stream()
                .filter(org -> org.getParentId().equals(id))
                .collect(Collectors.toList());
    }

4.API接口

@GetMapping
	public List queryTreeOrganizations(){
		List organizations = organizationService.queryUserOrganization();
		return organizationService.transformTreeOrganizations(organizations);
	}

5.WEB前端（treeData既是API接口返回的数据，有关增删查改具体方法省略）

 
          
            {{ node.label }}    
            
              
                添加
              
              
                删除
              
              
                详情
              
               
                修改