vue2-org-tree 树形管理

好久没写了，越来越懒

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":"碳酸酯外操操作员","type":"0","parentId":132,"desc":""},{"sorted":3,"id":134,"label":"碳酸酯包装员","type":"0","parentId":132,"desc":""},{"sorted":4,"id":135,"label":"碳酸酯叉车员","type":"0","parentId":132,"desc":""}],"id":132,"label":"碳酸酯班长","type":"0","parentId":92,"desc":""}],"id":92,"label":"碳酸酯值班班长","type":"0","parentId":85,"desc":""},{"sorted":2,"id":91,"label":"工艺员","type":"0","parentId":85,"desc":""}],"id":85,"label":"碳酸酯车间主任","type":"0","parentId":123,"desc":"部长"},{"sorted":4,"children":[{"sorted":1,"children":[{"sorted":1,"children":[{"sorted":1,"id":139,"label":"减水剂一工段操作员","type":"0","parentId":137,"desc":""},{"sorted":2,"id":140,"label":"减水剂一工段叉车员","type":"0","parentId":137,"desc":""},{"sorted":3,"id":141,"label":"减水剂一工段发货员","type":"0","parentId":137,"desc":""}],"id":137,"label":"减水剂一工段班长","type":"0","parentId":136,"desc":""},{"sorted":2,"children":[{"sorted":1,"id":142,"label":"减水剂二工段操作员","type":"0","parentId":138,"desc":""},{"sorted":2,"id":143,"label":"减水剂二工段叉车员","type":"0","parentId":138,"desc":""},{"sorted":3,"id":144,"label":"减水剂二工段发货员","type":"0","parentId":138,"desc":""}],"id":138,"label":"减水剂二工段班长","type":"0","parentId":136,"desc":""}],"id":136,"label":"减水剂车间副主任","type":"0","parentId":122,"desc":""}],"id":122,"label":"减水剂车间主任","type":"0","parentId":123,"desc":""}],"id":123,"label":"生产技术部部长","type":"0","parentId":83,"desc":""},{"sorted":2,"children":[{"sorted":1,"id":101,"label":"安全员1","type":"0","parentId":87,"desc":""},{"sorted":2,"id":145,"label":"安全员2","type":"0","parentId":87,"desc":""},{"sorted":3,"id":146,"label":"安全员3","type":"0","parentId":87,"desc":""},{"sorted":4,"id":147,"label":"QA专员","type":"0","parentId":87,"desc":""},{"sorted":5,"id":148,"label":"门卫","type":"0","parentId":87,"desc":""}],"id":87,"label":"质安环部部长","type":"0","parentId":83,"desc":""},{"sorted":5,"children":[{"sorted":1,"children":[{"sorted":1,"children":[{"sorted":1,"id":150,"label":"钳工技师","type":"0","parentId":149,"desc":""},{"sorted":3,"id":97,"label":"仪表技师","type":"0","parentId":149,"desc":""},{"sorted":5,"id":96,"label":"电气技师","type":"0","parentId":149,"desc":""},{"sorted":6,"id":98,"label":"焊工技师","type":"0","parentId":149,"desc":""}],"id":149,"label":"维修经理","type":"0","parentId":95,"desc":""}],"id":95,"label":"设备部副部长","type":"0","parentId":86,"desc":""}],"id":86,"label":"设备部部长","type":"0","parentId":83,"desc":""},{"sorted":6,"children":[{"sorted":1,"id":100,"label":"管理员1","type":"0","parentId":99,"desc":""},{"sorted":2,"id":151,"label":"管理员2","type":"0","parentId":99,"desc":""}],"id":99,"label":"工程部部长","type":"0","parentId":83,"desc":""},{"sorted":7,"children":[{"sorted":1,"id":152,"label":"产品库保管理员","type":"0","parentId":88,"desc":""},{"sorted":2,"id":153,"label":"产品库发货员","type":"0","parentId":88,"desc":""},{"sorted":3,"id":154,"label":"装卸工","type":"0","parentId":88,"desc":""},{"sorted":4,"id":155,"label":"叉车工","type":"0","parentId":88,"desc":""},{"sorted":5,"id":156,"label":"备品备件库保管员","type":"0","parentId":88,"desc":""}],"id":88,"label":"仓储部部长","type":"0","parentId":83,"desc":""},{"sorted":8,"children":[{"sorted":1,"id":105,"label":"采购员","type":"0","parentId":90,"desc":""},{"sorted":2,"id":157,"label":"采购内勤","type":"0","parentId":90,"desc":""}],"id":90,"label":"采购部部长","type":"0","parentId":83,"desc":""},{"sorted":9,"children":[{"sorted":9,"id":89,"label":"化验员","type":"0","parentId":158,"desc":""}],"id":158,"label":"化验室主任","type":"0","parentId":83,"desc":""},{"sorted":10,"children":[{"sorted":9,"children":[{"sorted":1,"id":159,"label":"研发实验员","type":"0","parentId":110,"desc":""}],"id":110,"label":"研发中心副主任","type":"0","parentId":108,"desc":""}],"id":108,"label":"研发中心主任","type":"0","parentId":83,"desc":""},{"sorted":11,"children":[{"sorted":1,"id":107,"label":"产品实验员","type":"0","parentId":106,"desc":""}],"id":106,"label":"售后中心主任","type":"0","parentId":83,"desc":""},{"sorted":12,"children":[{"sorted":1,"id":160,"label":"保洁员","type":"0","parentId":94,"desc":""},{"sorted":2,"id":161,"label":"食堂员工","type":"0","parentId":94,"desc":""},{"sorted":3,"id":162,"label":"财务专员","type":"0","parentId":94,"desc":""},{"sorted":4,"id":109,"label":"档案员","type":"0","parentId":94,"desc":""},{"sorted":5,"id":163,"label":"司机","type":"0","parentId":94,"desc":""}],"id":94,"label":"综合办主任","type":"0","parentId":83,"desc":""},{"sorted":13,"children":[{"sorted":1,"id":165,"label":"人事专员","type":"0","parentId":164,"desc":""},{"sorted":2,"id":166,"label":"it专员","type":"0","parentId":164,"desc":""}],"id":164,"label":"人力资源部部长","type":"0","parentId":83,"desc":""},{"sorted":14,"children":[{"sorted":1,"id":168,"label":"组员","type":"0","parentId":167,"desc":""}],"id":167,"label":"标准化小组组长","type":"0","parentId":83,"desc":""},{"sorted":16,"id":84,"label":"生产调度","type":"0","parentId":83,"desc":"生产调度"}],"id":83,"label":"生产厂长/安全总监","type":"0","parentId":10,"desc":""}],"id":10,"label":"总经理","type":"0","parentId":9,"desc":""}],"id":9,"label":"董事长","type":"0","parentId":null,"desc":""}]
}

step2 下载vue2-org-tree

npm i vue2-org-tree

npm install --save-dev less less-loader

step3 引用

main加入

import Vue2OrgTree from 'vue2-org-tree'
import './styles/org-tree.less'
Vue.use(Vue2OrgTree)

今天的bug出在 import './styles/org-tree.less' 上之前没有加，部分电脑样式会显示不出来导致没有树形结构所有数据都是一条直线罗列下来

vue2-org-tree 树形管理相关推荐

DWZ中Tree树形菜单的treeCheck如何获取返回值解决方案
最近在对DWZ和asp.net MVC3进行整合,其中遇到了很多问题,总算一一解决了,今天就说说题目所示的问题解决方案. 想做一个基于角色的权限管理,要对每一个Action进行权限控制.就想用DWZ的 ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...
使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...

vue2-org-tree 树形管理

step1 准备树形数据

step2 下载vue2-org-tree

step3 引用

vue2-org-tree 树形管理相关推荐

最新文章

热门文章