vue使用elementUI的折叠表格只出现父级，没有子菜单，另附树形菜单递归写法

使用的vue模板搭建的项目，在做表格的树形菜单时候，没有展现出层级关系，只展示了父级菜单，下面是修改后可以展开的正常效果：不然只有一行父级菜单

返回的数据节后也是符合要求的，有children等子节点的数据，后来发现，是版本的问题，vue模板的elementui的模板版本是2.4.6：

使用命令安装新版
cnpm install --save [email protected]：

重启项目，运行成功可以看到，多级菜单也是没有问题的：

这里附上后端的接口树形菜单的递归写法：
首先是查询树形结构方法selectDeptTree，查出全部的部门数据sysDeptList，定义方法buildSysDept，把部门数据作为参数传入，代码如下

 public List<SysDept> selectDeptTree() {
        QueryWrapper<SysDept> wrapper=new QueryWrapper<>();
        List<SysDept> sysDeptList = this.list(wrapper);
        List<SysDept> resultList=buildSysDept(sysDeptList);
        return resultList;
    }

创建buildSysDept方法，作用是查出第一级的父级菜单，初始化finalList集合，用来存放最终返回的数据，遍历所有数据sysDeptList，其中pid为0的就是一级菜单，再调用getDeptChirld递归方法，传入当前一级菜单sysDept与所有数据sysDeptList，再将查出来的此一级菜单下的所有子菜单都添加到最终集合finalList，

 private List<SysDept> buildSysDept(List<SysDept> sysDeptList) {
        List<SysDept>  finalList=new ArrayList<>();
        for (SysDept sysDept:sysDeptList) {
            if (sysDept.getPid()==0){
                SysDept childNode=getDeptChirld(sysDept,sysDeptList);
                finalList.add(childNode);
            }
        }
        return finalList;
    }

再创建递归方法getDeptChirld：此方法的返回值为部门信息SysDept ，初始化一级部门的子节点Children，遍历所有部门信息，当前部门的父级id等于一级部门的id，则当前部门属于父级部门的子级，判断当前节点的子节点是否为空，为空就初始化子节点，再调用本身，把子节点和所有数据传入，再走一遍，查看该节点是否还在有子节点，把查出来的子节点添加到当前节点sysDept

 private SysDept getDeptChirld(SysDept sysDept, List<SysDept> sysDeptList) {
        sysDept.setChildren(new ArrayList<>());
        for (SysDept childPer:sysDeptList) {
            if (childPer.getPid().equals(sysDept.getId())){
                if (childPer.getChildren()==null){
                    childPer.setChildren(new ArrayList<>());
                }
              SysDept deptChirld = getDeptChirld(childPer, sysDeptList);
                sysDept.getChildren().add(deptChirld);
            }
        }
        return sysDept;
    }