Vue关系结构插件的使用（vue-org-tree）

一、安装插件

npm install --save-dev vue2-org-tree
 
 
// # 建议安装 less-loader 防止样式出现问题
// 建议版本为 5.0.0，不然可能会报错
npm install --save-dev less less-loader

二、在main中添加

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

下载css样式

https://unpkg.com/vue2-org-tree/dist/style.css

在使用页面引入

@import '../assets/css/style.css';

三、使用插件实现

1.页面使用

<vue2-org-tree :data="data"/>

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人事"
                    }
                    ]
                },

2.修改背景色和点击事件

<vue2-org-tree :data="data" horizontal :label-class-name="labelClassName"
     @on-node-click="onNodeClick" />

data数据中添加
 
data() {
     return {
       labelClassName:"bg-color-blue",//自定义颜色
       collapsable:true, //折叠属性
       horizontal:true,  // 水平排列方式
    }
},
 
 
methods: {
  onNodeClick(e, data) {
      console.log(data)
   },
}
 
<style lang="scss" scoped>
@import '../assets/css/style.css';
::v-deep .bg-color-blue{
    color: orange;
    background-color: red; 
}
</style>

移入移出事件

@on-node-mouseover="onMouseover"
    @on-node-mouseout="onMouseout"
 
 
 
 
onMouseout(e, data) {
    
},
onMouseover(e, data) {
    
},

四、点击展开关闭

1.增加@on-expand="onExpand" 方法

<vue2-org-tree :data="NewsList[0]" :horizontal="horizontal" 
        :label-class-name="labelClassName" :collapsable="collapsable" 
         @on-node-click="onNodeClick" @on-expand="onExpand" 
    :renderContent="renderContent"/>

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);
    }
},
collapse(list) {
   var _this = this;
   list.forEach(function (child) {
    if (child.expand) {
      child.expand = false;
    }
     child.children && _this.collapse(child.children);
 });
},

五、自定义返回内容

1、:renderContent="renderContent" 

<vue2-org-tree :data="NewsList[0]" :horizontal="horizontal" 
   :label-class-name="labelClassName" :collapsable="collapsable" 
   @on-node-click="onNodeClick" @on-expand="onExpand" 
:renderContent="renderContent"/>

2、js部分 

renderContent(h, data) {
  if(data.type==1){
     return (
        <div class="cardlable">
            {data.sj?this.classType('书记',data.sj):''}
        </div>
     )
  }else{
      return (
        <div class="cardlable">{data.label}</div>
      )
  }
},
 
classType(name,data){
   if(!Array.isArray(data)) return;
       return (
         <div class="position-item">
              <h5>{name}:</h5>
              <div class="name">
                  { 
                    data.map(item=> {
                       return <h6>{item}</h6>
                    })
                  }
              </div>
          </div>
      )
},

 完整代码

<template>
   <div class="zznews-list">
       <vue2-org-tree :data="data" :horizontal="horizontal" 
        :label-class-name="labelClassName" :collapsable="collapsable" 
         @on-node-click="onNodeClick" @on-expand="onExpand" 
         :renderContent="renderContent"/>
   </div>
</template>
<script>
export default {
    data() {
        return {
            labelClassName:"bg-color-blue",
            collapsable:true,
            jibenInfo:{},
            showBJiBenModel:false,    
            horizontal:true,
            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人事"
              }
            ]
          },
        },
           
        }
    }, 
    created(){
      
    },
    methods: {
        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);
            }
        },
        onNodeClick(e, data) {
            console.log(data)
        },
        collapse(list) {
            var _this = this;
            list.forEach(function (child) {
                if (child.expand) {
                   child.expand = false;
                }
                child.children && _this.collapse(child.children);
            });
        },
        renderContent(h, data) {
             return (
                <div class="cardlable">{data.label}</div>
             )
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .bg-color-blue{
    color: orange;
    background-color: red; 
 }
</style>

六、补充插件  关系组件（relation-graph）

 网址：relation-graph:一个vue关系图谱组件