el-tree Tree 树形控件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHXxSFOA-1669265029354)(C:\Users\hj\AppData\Roaming\Typora\typora-user-images\image-20221123220643724.png)]

效果图（见后面的图片这里无法显示本地图片）

本篇文章只是为了解决显示问题，需要进行权限管理还需要对el控件进行研究，也就是选择了哪些，这些官网都有案列找这些即可

主要代码

public List<Test1> testTree(){
    //获取所有角色列表
    List<Test1> test1s = userMapper.selectAllR();
    //之加入父节点
    List<Test1> list=new ArrayList<>();
    //升序
    test1s.sort((a,b)->(b.getRole_father())-a.getRole_father());
	//方便快速索引
    HashMap<Integer, Test1> map = new HashMap<>();
    //将数据放入hash中
    for (Test1 test1 : test1s) {
        map.put(test1.getId(),test1);
    }
    for (Test1 test1 : test1s) {
        if (test1.getRole_father()==0){
            list.add(test1);
            continue;
        }
        //由于会出现null的值所以需要我们做判断
        if (map.get(test1.getRole_father()).getChildren()!=null){
            map.get(test1.getRole_father()).getChildren().add(test1);
        }else {
            ArrayList<Test1> arrayList = new ArrayList<>();
            arrayList.add(test1);
            map.get(test1.getRole_father()).setChildren(arrayList);
        }
    }
    return list;
}

这里遇到的错误，栈炸了然后分开写好了所以说不要把语句揉成一条这是个历史的教训

数据库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71CAcuFI-1669265029355)(C:\Users\hj\AppData\Roaming\Typora\typora-user-images\image-20221123221006190.png)]

在role_father中0是父节点,然后就是顾名思义

Tree的class类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnQoVOXu-1669265029356)(C:\Users\hj\AppData\Roaming\Typora\typora-user-images\image-20221123221109028.png)]

就酱

网页代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JN5pXS3F-1669265029356)(C:\Users\hj\AppData\Roaming\Typora\typora-user-images\image-20221123221159195.png)]

这里解释一下

• node-key 绑不绑定无所谓了只要子节点干得进去数据格式对就行了
• children 就是我们class类里面需要对应的字段，在后面更改即可
• label 我们进行需要显示出的文字就在这里也就是对应数据库里面的role_name字段
• defaultProps 这个是用于对el-tree的prop属性进行设置，具体还得参考官网https://element.eleme.cn/#/zh-CN/component/tree

属性进行设置，具体还得参考官网https://element.eleme.cn/#/zh-CN/component/tree



没有的图就看下面这里具体就是这么回事