vue中树状组织架构插件

最近公司项目中使用树形展示公司结构，但是项目中主要使用（Vue + Element），奈何 Element 的树形结构实在不符合需求，我就在网上找到了本文的主角vue2-org-tree，该插件的最大优点就是可定制性较高，对于后期'和蔼可亲'的甲方提出的需求，可以很好的进行满足。

安装

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

# 建议安装 less-loader 防止样式出现问题
npm install --save-dev less less-loader
yarn add --save-dev less less-loader
复制代码

引入

在main.js中添加

import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'

Vue.use(Vue2OrgTree)
复制代码

使用

在项目中创建一个 vue 文件， 配置好路由方便测试

在模板中

<vue2-org-tree :data="data"/>
复制代码

在data函数中

// 定义数据
data: {
  label: '江苏XX',
  value: '-1',
  children: [
    { 
      value: 'reqjfxqfzr',
      label: '需求室负责人',
      children: [
        {
          label: '任通',
          value: '1000035939'
        },
        {
          label: '林萍',
          value: '23000068'
        },
        {
          label: '王庆安',
          value: '23000079'
        }
      ]
    },
    { 
      value: 'req_fzr_kf',
      label: '开发室负责人',
      children: [
        {
          label: '任通',
          value: '1000035939'
        },
        {
          label: '林萍',
          value: '23000068'
        },
        {
          label: '王庆安',
          value: '23000079'
        }
      ]
    },
    { 
      value: 'req_fzr_dsj',
      label: '大数据室负责人',
      children: [
        {
          label: '任通',
          value: '1000035939'
        },
        {
          label: '林萍',
          value: '23000068'
        },
        {
          label: '王庆安',
          value: '23000079'
        }
      ]
    },
    { 
      value: 'req_fzr_bas',
      label: '经分室负责人',
      children: [
        {
          label: '任通',
          value: '1000035939'
        },
        {
          label: '林萍',
          value: '23000068'
        },
        {
          label: '王庆安',
          value: '23000079'
        }
      ]
    },
    { 
      value: 'reqownerinfo',
      label: '信息化室负责人',
      children: [
        {
          label: '任通',
          value: '1000035939'
        },
        {
          label: '林萍',
          value: '23000068'
        },
        {
          label: '王庆安',
          value: '23000079'
        }
      ]
    },
    { 
      value: 'reqownerinfo-aq',
      label: '安全室负责人',
      children: [
        {
          label: '任通',
          value: '1000035939'
        },
        {
          label: '林萍',
          value: '23000068'
        },
        {
          label: '王庆安',
          value: '23000079'
        }
      ]
    }
  ]

}
复制代码

效果如下

可以设置属性:horizontal="true"，从左到右展示

<vue2-org-tree :data="data" :horizontal="true"/>
复制代码

使用 label-class-name 我们还可以动态绑定自定义class

<vue2-org-tree :data="data" :horizontal="true" :label-class-name="labelClassName" />
复制代码

在data函数中定义变量labelClassName

labelClassName:"bg-color-blue",
复制代码

在样式中对.bg-color-blue 设置样式

style标签里不能加 scoped 不然自定义样式无效

.bg-color-blue{
  color: #fff;
  background-color: skyblue;
}
复制代码

样式效果如下

设置属性 collapsable可以收缩起来， @on-expand="onExpand" 可以进行展开操作，

使用 render-content 属性可以自行渲染节点的内容和样式，有利于扩展

@on-node-click="nodeClick"节点点击属性，可以获得点击时间和节点数据

@on-node-mouseover="onMouseover" 鼠标移入， @on-node-mouseout="onMouseout" 鼠标移出等事件，有需要的小伙伴可以参考案例！

案例代码

vue2-org-tree 案例使用代码：

gitee.com/yunxii/vue-…

工程化案例使用代码： gitee.com/yunxii/vue-…