• vue2 使用vue-org-tree 组件完整简单示例Demo vue2-org-tree

    先上效果

    可以切换节点颜色，展开与否，坚排或者横排都可以配置。

    安装

    安装vue2-org-tree, 然后再安装样式 less-loade

    1. cnpm install --save-dev less less-loader
    2. cnpm install --save-dev vue2-org-tree
    3.  
    4. 或者：
    5.  
    6. npm i vue2-org-tree -S
    7. npm install --save-dev less less-loader –S

    安装完成后，vue2项目根目录下package.json自动更新以上 2个包信息

    1.  "dependencies": {
    2.     "core-js": "^3.8.3",
    3.     "echarts": "^5.4.0",
    4.     "element": "^0.1.4",
    5.     "element-ui": "^2.15.10",
    6.     "install": "^0.13.0",
    7.     "less": "^3.9.0",
    8.     "less-loader": "^4.1.0",
    9.     "moment": "^2.29.4",
    10.     "vue": "^2.6.14",
    11.     "vue-router": "^3.5.2",
    12.     "vue2-org-tree": "^1.3.6"
    13.   },

    项目源码：

    main.js

    TreeTest.vue

    1. <template>
    2.   <div ref="appContainer" class="app-container">
    3.     <div style="margin-left:30px;">
    4.       <el-row :gutter="20">
    5.         <el-col :span="5">
    6.           <el-switch v-model="horizontal" :width="50" active-text="横排" inactive-text="竖排" style="margin-top:8px;"/>
    7.         </el-col>
    8.         <el-col :span="5">
    9.           <el-switch v-model="expandAll" :width="50" active-text="全部展开"
    10.                      inactive-text="全部折叠" style="margin:8px;" @change="expandChange"/>
    11.         </el-col>
    12.         <el-col :span="14">
    13.           <span style="font-size:14px;font-weight:500;">选择背景色:</span>
    14.           <el-select v-model="labelClassName" @change="selectChange">
    15.             <el-option value="bg-white" label="白色">白色</el-option>
    16.             <el-option value="bg-orange" label="橘黄色">橘黄色</el-option>
    17.             <el-option value="bg-gold" label="金色">金色</el-option>
    18.             <el-option value="bg-gray" label="灰色">灰色</el-option>
    19.             <el-option value="bg-lightpink" label="浅粉色">浅粉色</el-option>
    20.             <el-option value="bg-chocolate" label="巧克力色">巧克力色</el-option>
    21.             <el-option value="bg-tomato" label="番茄色">番茄色</el-option>
    22.           </el-select>
    23.         </el-col>
    24.       </el-row>
    25.     </div>
    26.     <div style="font-size:12px;margin-top:30px;">
    27.       <el-scrollbar :style="scrollTreeStyle" class="el-org-tree">
    28.         <vue2-org-tree
    29.             :data="treeData.data"
    30.             :horizontal="!horizontal"
    31.             :collapsable="collapsable"
    32.             :label-class-name="labelClassName"
    33.             :render-content="renderContent"
    34.             name="organ"
    35.             @on-expand="onExpand"
    36.             @on-node-click="onNodeClick"/>
    37.       </el-scrollbar>
    38.     </div>
    39.     <br/><br/>
    40.   </div>
    41. </template>
    42.  
    43.  
    44. <script>
    45. export default {
    46.   name: "TreeTest",
    47.   data() {
    48.     return {
    49.         "treeData": {
    50.           labelClassName: "bg-color-orange",
    51.           basicInfo: { id: null, label: "---null" },
    52.           basicSwitch: false,
    53.           data: {
    54.             id: 0,
    55.             label: "XXX科技有限公司",
    56.             children: [
    57.               {
    58.                 id: 2,
    59.                 label: "产品研发部",
    60.                 children: [
    61.                   {
    62.                     id: 5,
    63.                     label: "研发-前端",
    64.                     children: [
    65.                       {
    66.                         id: 55,
    67.                         label: "前端1"
    68.                       },
    69.                       {
    70.                         id: 56,
    71.                         label: "前端2"
    72.                       },
    73.                       {
    74.                         id: 57,
    75.                         label: "前端3"
    76.                       },
    77.                       {
    78.                         id: 58,
    79.                         label: "前端4"
    80.                       }
    81.                     ]
    82.                   },
    83.                   {
    84.                     id: 6,
    85.                     label: "研发-后端"
    86.                   },
    87.                   {
    88.                     id: 9,
    89.                     label: "UI设计"
    90.                   },
    91.                   {
    92.                     id: 10,
    93.                     label: "产品经理"
    94.                   }
    95.                 ]
    96.               },
    97.               {
    98.                 id: 3,
    99.                 label: "销售部",
    100.                 children: [
    101.                   {
    102.                     id: 7,
    103.                     label: "销售一部"
    104.                   },
    105.                   {
    106.                     id: 8,
    107.                     label: "销售二部"
    108.                   }
    109.                 ]
    110.               },
    111.               {
    112.                 id: 4,
    113.                 label: "财务部"
    114.               },
    115.               {
    116.                 id: 9,
    117.                 label: "HR人事"
    118.               }
    119.             ]
    120.           },
    121.         }
    122.       ,
    123.       horizontal: true, //横版 竖版
    124.       collapsable: false,
    125.       expandAll: true, //是否全部展开
    126.       labelClassName: '白色', // 默认颜色
    127.       scrollTreeStyle: 'width:100%;',
    128.     }
    129.   },
    130.   methods: {
    131.     //渲染节点
    132.     renderContent(h, data) {
    133.       return (
    134.           <div>
    135.             <div>
    136.               <i class="el-icon-user-solid"></i>
    137.               <span>{data.label}</span>
    138.               <span>男</span>
    139.             </div>
    140.             <div style="font-size:12px;line-height:20px;">测试人员</div>
    141.           </div>
    142.       );
    143.     },
    144.  
    145.     //鼠标移出
    146.     onMouseout(e, data) {
    147.       this.treeData.basicSwitch = false;
    148.     },
    149.     //鼠标移入
    150.     onMouseover(e, data) {
    151.       this.treeData.basicInfo = data;
    152.       this.treeData.basicSwitch = true;
    153.       var floating = document.getElementsByClassName("floating")[0];
    154.       floating.style.left = e.clientX + "px";
    155.       floating.style.top = e.clientY + "px";
    156.     },
    157.     //点击节点
    158.     NodeClick(e, data) {
    159.       console.log(e, data);
    160.     },
    161.     //默认展开
    162.     toggleExpand(data, val) {
    163.       if (Array.isArray(data)) {
    164.         data.forEach(item => {
    165.           this.$set(item, "expand", val);
    166.           if (item.children) {
    167.             this.toggleExpand(item.children, val);
    168.           }
    169.         });
    170.       } else {
    171.         this.$set(data, "expand", val);
    172.         if (data.children) {
    173.           this.toggleExpand(data.children, val);
    174.         }
    175.       }
    176.     },
    177.     collapse(list) {
    178.       list.forEach(child => {
    179.         if (child.expand) {
    180.           child.expand = false;
    181.         }
    182.         child.children && this.collapse(child.children);
    183.       });
    184.     },
    185.     //展开
    186.     onExpand(e, data) {
    187.       if ("expand" in data) {
    188.         data.expand = !data.expand;
    189.         if (!data.expand && data.children) {
    190.           this.collapse(data.children);
    191.         }
    192.       } else {
    193.         this.$set(data, "expand", true);
    194.       }
    195.     },
    196.     getList() {
    197.       // 后台回去的数据 赋值给data即可
    198.     },
    199.  
    200.     // 自定义您的点击事件
    201.     onNodeClick(e, data) {
    202.       alert("点击")
    203.     },
    204.  
    205.     expandChange() {
    206.       this.collapsable = true
    207.       this.toggleExpand(this.treeData.data, this.expandAll)
    208.     },
    209.     selectChange(){
    210.  
    211.     }
    212.  
    213.   }
    214.  
    215.  
    216. }
    217. </script>
    218.  
    219. <!--<style scoped>-->
    220. <!--</style>-->
    221. <style lang="less">
    222. .bg-white {
    223.   background-color: white;
    224. }
    225. .bg-orange {
    226.   background-color: orange;
    227. }
    228. .bg-gold {
    229.   background-color: gold;
    230. }
    231. .bg-gray {
    232.   background-color: gray;
    233. }
    234. .bg-lightpink {
    235.   background-color: lightpink;
    236. }
    237. .bg-chocolate {
    238.   background-color: chocolate;
    239. }
    240. .bg-tomato {
    241.   background-color: tomato;
    242. }
    243. //.org-tree-node-label-inner {
    244. //  color: #fff;
    245. //  background-color: orange;
    246. //}
    247.  
    248. .el-org-tree {
    249.   .el-scrollbar__wrap {
    250.     overflow-x: hidden;
    251.   }
    252.   .org-tree-node-label {
    253.     white-space: nowrap;
    254.   }
    255.   .el-tree-node__content{
    256.     background: white;
    257.   }
    258.   .org-tree-node-label .org-tree-node-label-inner {
    259.     padding-top: 8px;
    260.     padding-right: 10px;
    261.     padding-bottom: 5px;
    262.     padding-left: 10px;
    263.     cursor: pointer;
    264.   }
    265.   .horizontal .org-tree-node.is-leaf {
    266.     padding-top: 5px;
    267.     padding-bottom: 5px;
    268.   }
    269. }
    270. </style>

    App.vue 

    1. <template>
    2.   <div ref="appContainer" class="app-container">
    3.     <div style="margin-left:30px;">
    4.       <el-row :gutter="20">
    5.         <el-col :span="5">
    6.           <el-switch v-model="horizontal" :width="50" active-text="横排" inactive-text="竖排" style="margin-top:8px;"/>
    7.         </el-col>
    8.         <el-col :span="5">
    9.           <el-switch v-model="expandAll" :width="50" active-text="全部展开" inactive-text="全部折叠" style="margin-top:8px;" @change="expandChange"/>
    10.         </el-col>
    11.         <el-col :span="14">
    12.           <span style="font-size:14px;font-weight:500;">选择背景色:</span>
    13.           <el-select v-model="labelClassName" @change="selectChange">
    14.             <el-option value="bg-white" label="白色">白色</el-option>
    15.             <el-option value="bg-orange" label="橘黄色">橘黄色</el-option>
    16.             <el-option value="bg-gold" label="金色">金色</el-option>
    17.             <el-option value="bg-gray" label="灰色">灰色</el-option>
    18.             <el-option value="bg-lightpink" label="浅粉色">浅粉色</el-option>
    19.             <el-option value="bg-chocolate" label="巧克力色">巧克力色</el-option>
    20.             <el-option value="bg-tomato" label="番茄色">番茄色</el-option>
    21.           </el-select>
    22.         </el-col>
    23.       </el-row>
    24.     </div>
    25.     <div style="font-size:12px;margin-top:30px;">
    26.       <el-scrollbar :style="scrollTreeStyle" class="el-org-tree">
    27.         <vue2-org-tree
    28.             :data="treeData"
    29.             :horizontal="!horizontal"
    30.             :collapsable="collapsable"
    31.             :label-class-name="labelClassName"
    32.             :render-content="renderContent"
    33.             name="organ"
    34.             @on-expand="onExpand"
    35.             @on-node-click="onNodeClick"/>
    36.       </el-scrollbar>
    37.     </div>
    38.   </div>
    39. </template>
    40.  
    41.  
    42. <script>
    43. export default {
    44.   name: "TreeTest",
    45.   data() {
    46.     return {
    47.         "treeData": {
    48.           labelClassName: "bg-color-orange",
    49.           basicInfo: { id: null, label: null },
    50.           basicSwitch: false,
    51.           // data: {
    52.             id: 0,
    53.             label: "XXX科技有限公司",
    54.             children: [
    55.               {
    56.                 id: 2,
    57.                 label: "产品研发部",
    58.                 children: [
    59.                   {
    60.                     id: 5,
    61.                     label: "研发-前端",
    62.                     children: [
    63.                       {
    64.                         id: 55,
    65.                         label: "前端1"
    66.                       },
    67.                       {
    68.                         id: 56,
    69.                         label: "前端2"
    70.                       },
    71.                       {
    72.                         id: 57,
    73.                         label: "前端3"
    74.                       },
    75.                       {
    76.                         id: 58,
    77.                         label: "前端4"
    78.                       }
    79.                     ]
    80.                   },
    81.                   {
    82.                     id: 6,
    83.                     label: "研发-后端"
    84.                   },
    85.                   {
    86.                     id: 9,
    87.                     label: "UI设计"
    88.                   },
    89.                   {
    90.                     id: 10,
    91.                     label: "产品经理"
    92.                   }
    93.                 ]
    94.               },
    95.               {
    96.                 id: 3,
    97.                 label: "销售部",
    98.                 children: [
    99.                   {
    100.                     id: 7,
    101.                     label: "销售一部"
    102.                   },
    103.                   {
    104.                     id: 8,
    105.                     label: "销售二部"
    106.                   }
    107.                 ]
    108.               },
    109.               {
    110.                 id: 4,
    111.                 label: "财务部"
    112.               },
    113.               {
    114.                 id: 9,
    115.                 label: "HR人事"
    116.               }
    117.             ]
    118.           },
    119.         // }
    120.       // ,
    121.       horizontal: false, //横版 竖版
    122.       collapsable: false,
    123.       expandAll: true, //是否全部展开
    124.       labelClassName: '白色', // 默认颜色
    125.       scrollTreeStyle: 'width:100%;',
    126.     }
    127.   },
    128.   methods: {
    129.     //渲染节点
    130.     renderContent(h, data) {
    131.       return (
    132.           <div>
    133.             <div>
    134.               <i class="el-icon-user-solid"></i>
    135.               <span>{data.label}</span>
    136.               <span>男</span>
    137.             </div>
    138.             <div style="font-size:12px;line-height:20px;">测试人员</div>
    139.           </div>
    140.       );
    141.     },
    142.  
    143.     //鼠标移出
    144.     onMouseout(e, data) {
    145.       this.basicSwitch = false;
    146.     },
    147.     //鼠标移入
    148.     onMouseover(e, data) {
    149.       this.basicInfo = data;
    150.       this.basicSwitch = true;
    151.       var floating = document.getElementsByClassName("floating")[0];
    152.       floating.style.left = e.clientX + "px";
    153.       floating.style.top = e.clientY + "px";
    154.     },
    155.     //点击节点
    156.     NodeClick(e, data) {
    157.       console.log(e, data);
    158.     },
    159.     //默认展开
    160.     toggleExpand(data, val) {
    161.       if (Array.isArray(data)) {
    162.         data.forEach(item => {
    163.           this.$set(item, "expand", val);
    164.           if (item.children) {
    165.             this.toggleExpand(item.children, val);
    166.           }
    167.         });
    168.       } else {
    169.         this.$set(data, "expand", val);
    170.         if (data.children) {
    171.           this.toggleExpand(data.children, val);
    172.         }
    173.       }
    174.     },
    175.     collapse(list) {
    176.       list.forEach(child => {
    177.         if (child.expand) {
    178.           child.expand = false;
    179.         }
    180.         child.children && this.collapse(child.children);
    181.       });
    182.     },
    183.     //展开
    184.     onExpand(e, data) {
    185.       if ("expand" in data) {
    186.         data.expand = !data.expand;
    187.         if (!data.expand && data.children) {
    188.           this.collapse(data.children);
    189.         }
    190.       } else {
    191.         this.$set(data, "expand", true);
    192.       }
    193.     },
    194.     getList() {
    195.       // 后台回去的数据 赋值给data即可
    196.     },
    197.  
    198.     // 自定义您的点击事件
    199.     onNodeClick(e, data) {
    200.       alert("点击")
    201.     },
    202.  
    203.     expandChange() {
    204.       this.collapsable = true
    205.       this.toggleExpand(this.data, this.expandAll)
    206.     },
    207.     selectChange(){
    208.  
    209.     }
    210.  
    211.   }
    212.  
    213.  
    214. }
    215. </script>
    216.  
    217. <!--<style scoped>-->
    218. <!--</style>-->
    219. <style lang="less">
    220. .bg-white {
    221.   background-color: white;
    222. }
    223. .bg-orange {
    224.   background-color: orange;
    225. }
    226. .bg-gold {
    227.   background-color: gold;
    228. }
    229. .bg-gray {
    230.   background-color: gray;
    231. }
    232. .bg-lightpink {
    233.   background-color: lightpink;
    234. }
    235. .bg-chocolate {
    236.   background-color: chocolate;
    237. }
    238. .bg-tomato {
    239.   background-color: tomato;
    240. }
    241. //.org-tree-node-label-inner {
    242. //  color: #fff;
    243. //  background-color: orange;
    244. //}
    245.  
    246. .el-org-tree {
    247.   .el-scrollbar__wrap {
    248.     overflow-x: hidden;
    249.   }
    250.   .org-tree-node-label {
    251.     white-space: nowrap;
    252.   }
    253.   .el-tree-node__content{
    254.     background: white;
    255.   }
    256.   .org-tree-node-label .org-tree-node-label-inner {
    257.     padding-top: 8px;
    258.     padding-right: 10px;
    259.     padding-bottom: 5px;
    260.     padding-left: 10px;
    261.     cursor: pointer;
    262.   }
    263.   .horizontal .org-tree-node.is-leaf {
    264.     padding-top: 5px;
    265.     padding-bottom: 5px;
    266.   }
    267. }
    268. </style>

    样式配置：

    •  *：horizontal 组织结构图的排列方式，水平还是竖直，值为true 或 false
    •          collapsable 折叠效果，值为true 或 false
    •          label-class-name 修改背景色，支持自定义类名
    •          render-content 定义如何渲染 node 标签，绑定的 renderContent 是函数
    •          on-expand 定义折叠的组织结构如何展开，该函数参数必须传两个，第一个是 e ，第二个是 data
    •          on-node-click 定义当前节点被点击时执行的方法

    需要修改label名称

    1. :render-content="renderContent" //这个属性 
    2. renderContent(h, data) { return data.taskName },

    注意：

    注意：在style中引入样式，必须引入 引入全局样式： lang的值是less 样式

    如下，否则展开收缩按钮显示不出来，可以通过上面方法安装，或者下载less文件引用。

    https://gitee.com/hukaicode/vue-org-tree/tree/master/src/styles

    可以根据实际项目需要进行修改。

  • 相关阅读:
    团队Git规范文档（操作规范及提交规范）
    NFT交易平台开发 创建NFT数字藏品平台
    golang中的锁竞争问题
    【MySQL】高性能高可用设计实战-索引篇
    【AUTOSAR-RTE】-3-Runnable及其Task Mapping映射
    Vue + Flask 实现单页面应用
    torch.cuda.is_available() 解决方案
    交换机与路由器技术：静态NAT、动态NAT、PAT和端口镜像
    [附源码]Python计算机毕业设计Django保护濒危动物公益网站
    如何解决Smartsheet 登录时遇到的问题
  • 原文地址：https://blog.csdn.net/LlanyW/article/details/127647395