vue2-org-tree 树形管理

最新推荐文章于 2024-09-05 13:17:35 发布
高大王竟然被注册
最新推荐文章于 2024-09-05 13:17:35 发布
阅读量8.9k
点赞数 11
文章标签：树结构 node.js vue
本文链接：https://blog.csdn.net/weixin_42404521/article/details/114530338
版权
本文介绍了如何使用vue2-org-tree构建树形管理界面，包括准备树形数据、下载和引用插件、初始化数据、设置页面方法和样式。遇到的样式问题及解决方法也一并记录，方便以后查阅。
摘要由CSDN通过智能技术生成
好久没写了，越来越懒
vue2-org-tree本来老早就用了一直没记录，今天发现了bug，同事fix后记录一下吧，再遇到直接就command c + v 就好了
vue2-org-tree是一款插件快速构造树形（element ui 里的太丑了）
step1 准备树形数据

这是我的数据可以直接拿着测试
 {
   
    "treeData":[
        {
   
            "sorted":1,
            "children":[
                {
   
                    "sorted":1,
                    "children":[
                        {
   
                            "sorted":1,
                            "children":[
                                {
   
                                    "sorted":1,
                                    "children":[
                                        {
   
                                            "sorted":1,
                                            "id":115,
                                            "label":"生产技术部工艺员",
                                            "type":"0",
                                            "parentId":123,
                                            "desc":""
                                        },
                                        {
   
                                            "sorted":2,
                                            "children":[
                                                {
   
                                                    "sorted":1,
                                                    "children":[
                                                        {
   
                                                            "sorted":2,
                                                            "children":[
                                                                {
   
                                                                    "sorted":1,
                                                                    "id":125,
                                                                    "label":"中控操作员",
                                                                    "type":"0",
                                                                    "parentId":116,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":2,
                                                                    "id":121,
                                                                    "label":"前操操作员",
                                                                    "type":"0",
                                                                    "parentId":116,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":3,
                                                                    "id":120,
                                                                    "label":"环氧操作员",
                                                                    "type":"0",
                                                                    "parentId":116,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":4,
                                                                    "id":127,
                                                                    "label":"催化剂操作员",
                                                                    "type":"0",
                                                                    "parentId":116,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":8,
                                                                    "id":118,
                                                                    "label":"内操",
                                                                    "type":"0",
                                                                    "parentId":116,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":9,
                                                                    "id":119,
                                                                    "label":"外操",
                                                                    "type":"0",
                                                                    "parentId":116,
                                                                    "desc":""
                                                                }
                                                            ],
                                                            "id":116,
                                                            "label":"一二工段班长",
                                                            "type":"0",
                                                            "parentId":124,
                                                            "desc":""
                                                        }
                                                    ],
                                                    "id":124,
                                                    "label":"聚合工段段长",
                                                    "type":"0",
                                                    "parentId":114,
                                                    "desc":""
                                                },
                                                {
   
                                                    "sorted":2,
                                                    "children":[
                                                        {
   
                                                            "sorted":3,
                                                            "children":[
                                                                {
   
                                                                    "sorted":1,
                                                                    "id":128,
                                                                    "label":"切片操作员",
                                                                    "type":"0",
                                                                    "parentId":117,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":2,
                                                                    "id":129,
                                                                    "label":"切片工段叉车员",
                                                                    "type":"0",
                                                                    "parentId":117,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":3,
                                                                    "id":130,
                                                                    "label":"切片工段看料操作员",
                                                                    "type":"0",
                                                                    "parentId":117,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":4,
                                                                    "id":131,
                                                                    "label":"切片工段检斤操作员",
                                                                    "type":"0",
                                                                    "parentId":117,
                                                                    "desc":""
                                                                }
                                                            ],
                                                            "id":117,
                                                            "label":"切片工段班长",
                                                            "type":"0",
                                                            "parentId":126,
                                                            "desc":""
                                                        }
                                                    ],
                                                    "id":126,
                                                    "label":"切片工段段长",
                                                    "type":"0",
                                                    "parentId":114,
                                                    "desc":""
                                                }
                                            ],
                                            "id":114,
                                            "label":"单体车间主任",
                                            "type":"0",
                                            "parentId":123,
                                            "desc":""
                                        },
                                        {
   
                                            "sorted":3,
                                            "children":[
                                                {
   
                                                    "sorted":2,
                                                    "children":[
                                                        {
   
                                                            "sorted":1,
                                                            "children":[
                                                                {
   
                                                                    "sorted":1,
                                                                    "id":133,
                                                                    "label":"碳酸酯内操操作员",
                                                                    "type":"0",
                                                                    "parentId":132,
                                                                    "desc":""
                                                                },
                                                                {
   
                                                                    "sorted":2,
                                                                    "id":93,
                                                                    "label":"碳酸酯外操操作员",