vue——实现组织架构图(vue-org-tree)——技能提升

男娘i 2022-09-04 11:46 779阅读 0赞

关于组织架构图，效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
之前我是用`jq`写过一个组织架构图，文章链接如下：当时是用的`jOrgChart`

[jq版本的组织架构图：https://blog.csdn.net/yehaocheng520/article/details/117379214?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=162883781016780264023604&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2blogfirst\_rank\_v2~rank\_v29-1-117379214.pc\_v2\_rank\_blog\_default&utm\_term=%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84%E5%9B%BE&spm=1018.2226.3001.4450][jq_https_blog.csdn.net_yehaocheng520_article_details_117379214_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162883781016780264023604_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_162883781016780264023604_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2blogfirst_rank_v2_rank_v29-1-117379214.pc_v2_rank_blog_default_utm_term_E7_BB_84_E7_BB_87_E6_9E_B6_E6_9E_84_E5_9B_BE_spm_1018.2226.3001.4450]

当时对`jOrgChart`不是很熟，因此在写的时候遇到了很多问题，虽然最终实现了功能，但并不完美。

今天在看不同的后台管理系统框架，看到了`iview-vue`，在这个框架中看到了组织架构图，进而知道了`vue-org-tree`这个插件，可以实现`vue`版本的组织架构图。

简易版效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
我从网上找到一个大神关于`vue-org-tree`这个插件的详细使用步骤，大神写的非常的详细，我基本上都是参照大神完成的。

[大神关于`vue-org-tree`插件的具体使用步骤：https://www.cnblogs.com/10ve/p/12573772.html][vue-org-tree_https_www.cnblogs.com_10ve_p_12573772.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
附上`vue-org-tree`的`github`链接：  
[`vue-org-tree`插件的`github`链接：https://github.com/hukaibaihu/vue-org-tree\#readme][vue-org-tree_github_https_github.com_hukaibaihu_vue-org-tree_readme]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

下面将我的步骤记录如下：

# 1.`vue`插件下载，也可以直接`cdn`引入 #

我刚开始是按照`github`上的安装的，后来发现安装之后有问题，因此我直接按照大神提供的思路进行安装了。

#### `npm install vue-tree-color`——安装`vue-tree-color`，注意不是`vue-org-tree` ####

# 2.安装`less`和`less-loader` #

安装`less`和`less-loader`之前，确定当前系统中是否已经安装过了`less` `lessloaer`，可以找到`package.json`文件，在此文件中检索`less`和`less-loader`。

`npm install --save-dev less less-loader`

# 3.在`main.js`中引入`vue-org-tree`插件 #

import Vue from 'vue'
    import Vue2OrgTree from 'vue-tree-color'
    Vue.use(Vue2OrgTree)

# 4.运行项目，此时报错了 #

报错信息：`Syntax Error: TypeError: this.getOptions is not a function`

于是，百度：  
[大神解决`vue`安装`less lessloader`插件报错问题：https://blog.csdn.net/zhangyuying\_777/article/details/115114147][vue_less lessloader_https_blog.csdn.net_zhangyuying_777_article_details_115114147]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
报错原因及解决办法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
需要在安装`less`和`lessloader`时，指定版本号，否则就会导致兼容问题。

`npm i less@3.9.0 less-loader@4.1.0 -D`

安装完成后，再次运行，成功。

# 5.使用`vue-org-tree`插件 #

由于之前在`main.js`中已经引入插件到全局了，则此时可以直接在页面中使用

### `template`中的写法 ###

我下了横向和纵向两种，

> 1.  data:就是数据格式，时一个对象，具体格式下面有示例
> 2.  horizontal:默认是false，即纵向展示
> 3.  label-class-name:可以给节点添加的类名，不过我这边使用了没有效果，下面有其他方法来处理节点样式
> 4.  collapsable:是否折叠，有这个属性，则表示默认折叠，有其他方法可以在存在此属性时，也保证是展开状态
> 5.  on-expand:点击折叠点，点击可以展开，再次点击可以折叠，是个方法
> 6.  on-node-click:顾名思义，就是点击节点，触发的事件
> 7.  on-node-mouseover:鼠标移入节点触发的事件，可以触发一个弹层用于展示详情
> 8.  on-node-mouseout:鼠标移出节点触发的事件，可以控制详情弹层的隐藏

<vue2-org-tree
      :data="data"
      :horizontal="true"
      :label-class-name="labelClassName"
      collapsable
      @on-expand="onExpand"
      @on-node-click="NodeClick"
      @on-node-mouseover="onMouseover"
      @on-node-mouseout="onMouseout"
      :renderContent="renderContent"
    />
    <vue2-org-tree
      :data="data"
      :label-class-name="labelClassName"
      collapsable
      @on-expand="onExpand"
      @on-node-click="NodeClick"
      @on-node-mouseover="onMouseover"
      @on-node-mouseout="onMouseout"
      :renderContent="renderContent"
    />

### `js`中的写法 ###

#### `data`的数据结构 ####

data(){ 
    	return{ 
    	  labelClassName: "bg-color-orange",
          basicInfo: {  id: null, label: null },
          basicSwitch: false,
          data: { 
            id: 0,
            label: "XXX科技有限公司",
            children: [
              { 
                id: 2,
                label: "产品研发部",
                children: [
                  { 
                    id: 5,
                    label: "研发-前端",
                    children: [
                      { 
                        id: 55,
                        label: "前端1"
                      },
                      { 
                        id: 56,
                        label: "前端2"
                      },
                      { 
                        id: 57,
                        label: "前端3"
                      },
                      { 
                        id: 58,
                        label: "前端4"
                      }
                    ]
                  },
                  { 
                    id: 6,
                    label: "研发-后端"
                  },
                  { 
                    id: 9,
                    label: "UI设计"
                  },
                  { 
                    id: 10,
                    label: "产品经理"
                  }
                ]
              },
              { 
                id: 3,
                label: "销售部",
                children: [
                  { 
                    id: 7,
                    label: "销售一部"
                  },
                  { 
                    id: 8,
                    label: "销售二部"
                  }
                ]
              },
              { 
                id: 4,
                label: "财务部"
              },
              { 
                id: 9,
                label: "HR人事"
              }
            ]
          },
    	}
    },
    methods:{ 
    	//渲染节点
    	renderContent(h, data) { 
          return (
            <div>
              <div>
                <i class="el-icon-user-solid"></i>
                <span>{ data.label}</span>
                <span>男</span>
              </div>
              <div style="font-size:12px;line-height:20px;">测试人员</div>
            </div>
          );
        },
        //鼠标移出
        onMouseout(e, data) { 
          this.basicSwitch = false;
        },
        //鼠标移入
        onMouseover(e, data) { 
          this.basicInfo = data;
          this.basicSwitch = true;
          var floating = document.getElementsByClassName("floating")[0];
          floating.style.left = e.clientX + "px";
          floating.style.top = e.clientY + "px";
        },
        //点击节点
        NodeClick(e, data) { 
          console.log(e, data);
        },
        //默认展开
        toggleExpand(data, val) { 
          if (Array.isArray(data)) { 
            data.forEach(item => { 
              this.$set(item, "expand", val);
              if (item.children) { 
                this.toggleExpand(item.children, val);
              }
            });
          } else { 
            this.$set(data, "expand", val);
            if (data.children) { 
              this.toggleExpand(data.children, val);
            }
          }
        },
        collapse(list) { 
          list.forEach(child => { 
            if (child.expand) { 
              child.expand = false;
            }
            child.children && this.collapse(child.children);
          });
        },
        //展开
        onExpand(e, data) { 
          if ("expand" in data) { 
            data.expand = !data.expand;
            if (!data.expand && data.children) { 
              this.collapse(data.children);
            }
          } else { 
            this.$set(data, "expand", true);
          }
        },
    }

上面代码中，有个渲染节点的函数，因为默认的样式是只展示标签中的`label`字段，但是实际应用场景中，经常需要展示其他的字段，则此时可以通过渲染节点的函数，对节点进行重新编写及样式调整。  
就是下面的函数：

renderContent(h, data) { 
          return (
            <div>
              <div>
                <i class="el-icon-user-solid"></i>
                <span>{ data.label}</span>
                <span>男</span>
              </div>
              <div style="font-size:12px;line-height:20px;">测试人员</div>
            </div>
          );
        },

`注意：在渲染函数中，变量可以直接通过{}单大括号来进行展示，而不是template中的双大括号的展示形式`

通过上面的代码，就可以实现下面的效果了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]  
此处的渲染节点的函数写法，在插件文档上其实是没有详细描述的，我是百度查找到的答案。  
[vue中使用tree自定义节点时的render-content的链接：https://blog.csdn.net/weixin\_42329676/article/details/89713008][vue_tree_render-content_https_blog.csdn.net_weixin_42329676_article_details_89713008]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]  
虽然不是同一个组件，但是写法是可以借鉴的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]  
我在上面提供的渲染方法的基础上，修改后同样实现了渲染组织架构图节点的效果。

上面还提到了，节点样式处理，当无法通过`label-class-name`来进行调整样式时，可以通过下面的方式来处理：

.org-tree-node-label-inner { 
      color: #fff;
      background-color: orange;
    }

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/6a00dd8b1f254c2ba7828024c43e1f59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/03c79c4af9764c94864da489a24d37d1.png
[jq_https_blog.csdn.net_yehaocheng520_article_details_117379214_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162883781016780264023604_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_162883781016780264023604_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2blogfirst_rank_v2_rank_v29-1-117379214.pc_v2_rank_blog_default_utm_term_E7_BB_84_E7_BB_87_E6_9E_B6_E6_9E_84_E5_9B_BE_spm_1018.2226.3001.4450]: https://blog.csdn.net/yehaocheng520/article/details/117379214?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=162883781016780264023604&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-1-117379214.pc_v2_rank_blog_default&utm_term=%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84%E5%9B%BE&spm=1018.2226.3001.4450
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/74ba674cd8cd4747bad8208058014cf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/21a455b184e54224ad4cc179373c565a.png
[vue-org-tree_https_www.cnblogs.com_10ve_p_12573772.html]: https://www.cnblogs.com/10ve/p/12573772.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220829/9e38ce9fd7974c19aa0449f31d827ff1.png
[vue-org-tree_github_https_github.com_hukaibaihu_vue-org-tree_readme]: https://github.com/hukaibaihu/vue-org-tree#readme
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20220829/687ec9b391ef43a2bac8f8e84f8cdae4.png
[vue_less lessloader_https_blog.csdn.net_zhangyuying_777_article_details_115114147]: https://blog.csdn.net/zhangyuying_777/article/details/115114147
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20220829/b7975e9a9a7e404db50f057182573cb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20220829/ca65330dcc114a4d980852425a3298cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20220829/47de28239d6348bc99f30135e5cbf5f2.png
[vue_tree_render-content_https_blog.csdn.net_weixin_42329676_article_details_89713008]: https://blog.csdn.net/weixin_42329676/article/details/89713008
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20220829/b9ce30c9f53e4f44b3c6f0f53461d4f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]: /images/20220829/54b3a122134e4e86b74957cab06de448.png