最近用到了el-tree控件，主要是数据的格式，按照官网的数据格式来就可以显示节点的树形结构了。
代码参考很多
这里给出一个比较好的链接：https://www.jb51.net/article/181990.htm
代码说明在注释里写的很详细了已经，这里不再叙述说明。至于为什么抽取成这种格式的数据，那是因为ElementUI-tree规定的数据格式，你想要用这个控件，就必须按照他们规定的这个格式 来。
数据格式如下：
Controller代码
@RequestMapping("/cateList") @ResponseBody public List<TbCategory> cateList() { // 整体思路： // 1、取得所有数据、放入集合List1 （tbCategories） // 2、将List1所有数据都放入到map（treeMap）中：元素id为键，元素本身对象为值 // 3、取得顶层节点放入集合List2中（resultList） // 4、遍历List1中的所有数据，通过数据的parentId为键在map中取值 // 1）如果能取到，则说明该元素有父节点 // 1、判断该父节点下的childList中是否有已经子节点 // 1、若无：则创建一个集合，将子节点放入 // 2、若有：则直接将子节点放入即可 // 5、把放好的数据放回到map中 // 6、返回List2（resultList） // 注意：整个过程将所有数据取出放入list2（resultList）,返回的也是 //list2 List<TbCategory> tbCategories = categoryService.cateList(); List<TbCategory> resultList = new ArrayList<TbCategory>(); // 存贮顶层的数据 Map<Object ,Object> treeMap = new HashMap(); Object itemTree; for(int i = 0;i<tbCategories.size() && !tbCategories.isEmpty();i++){ itemTree = tbCategories.get(i); treeMap.put(tbCategories.get(i).getNodeId(),tbCategories.get(i));// 把所有的数据都放到map中 } // 这里也可以用另一种方法，就是拿到集合里的每个元素的父id去数据库中查询，但是，这样与数据库的交互次数就太多了 // 遍历map得到顶层节点（游离节点也算作顶层节点） for(int i =0;i<tbCategories.size();i++){ // 优点1：整个方法，只查询了一次数据库 // 优点2：不用知道顶层节点的id if(!treeMap.containsKey(tbCategories.get(i).getParentId())){ // 我们在存储的时候就是将元素的id为键，元素本身为值存入的 // 以元素的父id为键，在map里取值，若取不到则，对应的元素不存在，即没有父节点，为顶层节点或游离节点 // 将顶层节点放入list集合 resultList.add(tbCategories.get(i)); } } // 循环数据，将数据放到该节点的父节点的children属性中 for(int i =0 ;i<tbCategories.size()&& !tbCategories.isEmpty();i++){ // 数据库中，若一个元素有子节点，那么，该元素的id为子节点的父id //treeMap.get(tbCategories.get(i).getParentId()); // 从map集合中找到父节点 TbCategory category = (TbCategory)treeMap.get(tbCategories.get(i).getParentId()); if(category!=null ){ // 不等于null，也就意味着有父节点 // 有了父节点，要判断父节点下存贮字节点的集合是否存在，然后将子节点放入 if(category.getChildList() == null){ // 判断一个集合是否被创建用null：表示结合还没有被分配内存空间(即还没有被创建)，内存大小自然为null // 用集合的size判断集合中是否有元素，为0，没有元素（集合已经被创建）， category.setChildList(new ArrayList<TbCategory>()); } category.getChildList().add(tbCategories.get(i)); // 添加到父节点的ChildList集合下 // 这一步其实可以不要，因为我们修改了数据（添加了子节点，然后在将元素放入到map中， // 若键相同，map会自动覆盖掉相同的键值对，达到更新map集合中的数据的目的），但是我们 // 这里只是从map中取值，而并不关心值的子节点（子节点是对象本身自己封装的。这里我们知道 // 元素从查询后放入map,父节点放入list，然后通过键来在map中取得对象，之后再将修改过的对象重新放入map当中 // ,我们并没有直接操作list,但是在list中对象的值却是已经修改过了，这就是对象的引用传递，同一个引用对象是通过 // 地址值来操作对象的，即有不同的引用，但是对象中的属性是已经通过引用的操作而改变的，所以这里一旦修改过后，无论是map中还是list中，再次取值时都已经是更改过后的值了） treeMap.put(tbCategories.get(i).getParentId(),category); // 把放好的数据放回到map中 } } return resultList; }
实体类：
private Long nodeId; private String categoryName; private Long parentId; private Long childId; private List<T> childList;
以上数据都在后台封装好了，前台直接获取数据显示即可
<el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" node-key="nodeId" show-checkbox=true> </el-tree>
js: