vue中使用jsplumb基本教程

jsplumb中文教程地址： https://wdd.js.org/jsplumb-chinese-tutorial/#/

需求效果展示：

说明：在展示普通流程图的基础上，实现以下功能：在流程图中展示当前所在节点，并体现出其流转过程。上图中当前节点为分公司咨询组，流转过程为：派单->省公司虚拟专家组->分公司咨询组

安装依赖包：npm i jsplumb

在main.js中将jsplumb挂在vue下便于页面获取

import jsPlumb from 'jsplumb'

Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

主要代码：

<div id="container">
              <div class="col1">
                <div id="processDefineDiv_node_2" name="cell">派单</div>
              </div>
              <div class="col2">
                <div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="cell">{
  { item.name }}</div>
              </div>
              <div class="col3">
                <div id="processDefineDiv_node_6" name="cell">完成</div>
              </div>
            </div>

// 样式
#container{
		position: relative;
		width: 100%;
    padding: 0 50px;
	}
	.col2,.col1{
    float: left;
    text-align: center;

  }
  .col3{
    float: right;
    text-align: center;
	}
	.col1{
    width: 180px;
	}
	.col2{