vue2项目引入流程图及使用方法

在vue2项目中想要添加类似流程图的模块 数据由后台给出

我找到了这个插件 简单好用 大致实现的效果是这样子的

接下里说一下使用方法

首先需要npm 下载插件

npm install vue-tree-color

可能在安装插件的时候会有提示报错 可以尝试添加 -force 无视冲突安装

同时查看项目中是否已安装less和less-loader,因为该组件使用到less

npm install --save-dev less less-loader

如果这里启动项目报错,有可能是less和less-loader的版本过高,可以降低版本,或者指定版本号

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

在main.js中全局挂载

import Vue2OrgTree from 'vue-tree-color'

Vue.use(Vue2OrgTree)

<template>
  <div>
    <vue2-org-tree
      :data="treedata"
      :horizontal="true"
      collapsable
      @on-expand="onExpand"
      @on-node-click="moduleClick"
      :renderContent="renderContent"
    />
  </div>
</template>
 
<script>
export default {
  name: "InviteApp",
  data() {
    return {
      treedata: {
        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人事",
          },
        ],
      },
    };
  },
 
  mounted() {
    this.toggleExpand(this.treedata, true);
  },
 
  methods: {
    collapse(list) {
      var that = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && that.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);
      }
    },
 
    toggleExpand(data, val) {
      var that = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          that.$set(item, "expand", val);
          if (item.children) {
            that.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          that.toggleExpand(data.children, val);
        }
      }
    },
 
    //*************************** */
    //点击图例的每个模块
    //***************************** */
    moduleClick(e, data) {
      console.log(e);
      // e 为 event
      console.log(data);
      // 当前项的所有详情 如：id label children
    },
 
    //渲染节点
    renderContent(h, data) {
      return (
        <div class="bgcolor">
          <div class="firstlabel">
            <i class="el-icon-user-solid"></i>
            <span>{data.label}</span>
            <span>男</span>
          </div>
          <div class="seclabel">测试人员</div>
        </div>
      );
    },
  },
};
</script>
 
<style>
/* 设置每个模块的css */
.bgcolor {
  width: 190px;
  height: 50px;
  background: orange;
}
 
.firstlabel {
  color: red;
  font-size: 12px;
  line-height: 25px;
  font-weight: 900;
}
 
.seclabel {
  font-size: 12px;
  line-height: 25px;
  color: blue;
}
 
/* 直接用dom的css设置  */
.org-tree-node-label .org-tree-node-label-inner {
  margin: 0;
  padding: 0;
}
</style>

以上是demo代码,大家可以参考,有问题大家可以指出~