OrgTree组件相关内容

1. 安装

npm i vue2-org-tree
// 建议版本为 5.0.0，不然可能会报错
npm install --save-dev less less-loader

2. 组件引入及样式引入

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)
 // 样式（使用组件的页面引入）
 <style lang="less">
	@import '/src/css/org-tree.less';
</style>

3. 页面使用

   <OrgTree class="ccc" :data="data" :horizontal="horizontal" @on-expand="onExpand"
        @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout"
        @on-expand-mouseover="Mouseover" @on-expand-mouseout="Mouseout"
        :render-content="renderContent" collapsable>
      </OrgTree>

4. 数据结构

// 数据结构
data: {
  id: 0,
  label: "XXX科技有限公司",
  children: [
    {
      id: 2,
      label: "产品研发部",
      children: [
        {
          id: 5,
          label: "研发-前端"
        },
        {
          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人事"
    }
  ]
},

5. 使用场景

组织架构及各种组织树；

6. 说明

该组件支持新建，编辑，删除，根据条件渲染节点颜色，支持各种样式渲染。

horizontal：排列方式（水平排列），horizontal 是水平排列方式；

7. 页面用到的方法

    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)
      }
    },
      // 鼠标移入事件
    onmouseoverCahnge(data) {
      data.show = true
    },
    // 鼠标移出事件
    onmouseoutCahnge(data) {
      data.show = false
    },
	    // 鼠标移入树节点
    onMouseover(e, data) {
     //  data：鼠标移入，该节点的所有数据
    },
	 // 重定向样式及内容
    renderContent(h, data) {
    // 重新渲染自己想要的样式
	 return   <div class='addNode' style='width:140px !important;padding-top:10px;cursor: pointer;'  on-dblclick={() => this.dblclick(data)} on-click={(data) => this.click(data)} >
          {/* class={{ addNodeItem: data.bgColor === '#17488F', addNodeItemX: data.bgColor === '#225440', addNodeItemXS: data.bgColor === '#353E52' }} */}
          <div style={itemStyleIbj}>
            <dd class='sumitem1'><img src={data.relations === 1 ? this.imgUrl1 : (data.relations === 2 ? this.imgUrl2 : '')} /></dd>
            <div >{data.label}</div>
          </div>
          <div style={addNodeItem}>{data.numData}</div>
          <span id='iconA' class={{ iconA1: data.bgColor === '#17488F', iconA2: data.bgColor === '#225440', iconA3: data.bgColor === '#353E52' }} v-show={data.show === true} on-click={(even) => this.iconClick(even)}></span>
        </div>
		// on-dblclick  双击事件
		// on-click   单击事件
		// 注意：此处的双击事件会触发单击事件的执行，建议单击事件加以下内容
	}
	  click(data) {
	  // data中定义timeOut：null；time: 300,
      let that = this;
      clearTimeout(that.timeOut);
      that.timeOut = setTimeout(function () {
      //单击中需要执行的内容......
      },this.time)
      dblclick(keyObj) {
      clearTimeout(this.timeOut)
      }

组件的新建，编辑，删除目前均有两种方式可实现，分别为：

1. 鼠标移入节点onMouseover时，小弹框展示新建，编辑，删除供用户选择；
2. renderContent重定向时，点击事件或双击事件中弹框展示新建，编辑，删除供用户选择；
   以上两种方式均在项目中使用过，对于体验来说，更建议使用第二种方式。方式一的弊端在于鼠标移入到节点展示小弹框时，会因为鼠标的微弱移动点击不到操作的小弹框，体验感极差。
   以上就是在vue中使用OrgTree的全部内容，如有疑问或更好的内容，欢迎交流。