这个错误是在新增数据源的时候出现的

 <el-col class="object-box" :xs="4" :sm="4" :md="4" :lg="8" :xl="8">
          <p>对象库</p>
          <div class="object-item" v-for="(item ,index) in listArray">
            <el-button @click="addPoint(item.procId,item.name)" class="button-style" type="primary">{{item.name}}</el-button>
          </div>

        </el-col>

画布

 <div id="labelManage">
            <div id="main">
              <div class="flowchart-canvas" id="flowchart-canvas">
                <div class="window" id="flow-start">开始</div>
                <div class="window" id="flow-end">结束</div>
                <!--<div class="window" id="flow-end-1">结束</div>-->
                <div :class="item.className" class="window new-item" v-for="(item,index) in sourceArray" :id="item.id">{{item.name}}</div>
              </div>
            </div>
          </div>

初始化和添加数据源

 init(){
      console.log('aaaaaa')
      jsPlumb.ready(function() {
        var jsPlumbChart = jsPlumb.getInstance({
          DragOptions: { cursor: 'pointer', zIndex: 2000 },
          PaintStyle: { stroke: '#2196f3', strokeWidth: 1 },  //配置自己拖拽小点的时候连接线的默认样式
          Endpoint: ["Dot", {radius: 5}], //这个是控制连线终端那个小点的半径
          // EndpointStyle : { fill : "red" }, //这个是控制连线终端那个小点的样式
          // EndpointHoverStyle  : { fill : "blue" }, //这个是控制连线终端那个小点的样式
          Connector: ["Flowchart",{curviness:70}],
          ConnectionOverlays: [
            [ "Arrow", { location: 1 } ],
            [ "Label", {
              location: 0.5,
              label: "流程",
              id: "label",
              cssClass: "aLabel"
            }]
          ],
          Container:"flowchart-canvas"
        });

        jsPlumbChart.draggable($('.window'));
        jsPlumbChart.addEndpoint('flow-start',{uuid:1 , anchor: "Bottom",  isSource:true});
        jsPlumbChart.addEndpoint('flow-end',{uuid:2 ,anchor:'Top', isTarget:true});
        // jsPlumbChart.addEndpoint('flow-end-1',{uuid:2 ,anchor:'Top', isTarget:true});

        //init connect
        // jsPlumbChart.connect({
        //   uuids:[1,2],  //根据uuid进行连接
        //   paintStyle: { stroke: '#2196f3', strokeWidth: 2 },  //线的样式
        //   endpointStyle: { fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 2 },//点的样式
        //   overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]   //覆盖物 箭头 及 样式
        // })

      });
    },
    addPoint(procId,name){
      this.sourceArray.push({
        procId: procId,
        parentNode: procId,
        id: nodeId++,
        name: name,
        className: 'jtk-draggable jtk-endpoint-anchor'
      })
      console.log(nodeId,'nodeId')
      console.log(nodeId.toString(),'nodeId')
      jsPlumb.ready(function () {
        var jsPlumbChart = jsPlumb.getInstance({
          DragOptions: { cursor: 'pointer', zIndex: 2000 },
          PaintStyle: { stroke: '#2196f3', strokeWidth: 1 },  //配置自己拖拽小点的时候连接线的默认样式
          Endpoint: ["Dot", {radius: 5}], //这个是控制连线终端那个小点的半径
          // EndpointStyle : { fill : "red" }, //这个是控制连线终端那个小点的样式
          // EndpointHoverStyle  : { fill : "blue" }, //这个是控制连线终端那个小点的样式
          Connector: ["Flowchart",{curviness:70}],
          ConnectionOverlays: [
            [ "Arrow", { location: 1 } ],
            [ "Label", {
              location: 0.5,
              label: "流程",
              id: "label",
              cssClass: "aLabel"
            }]
          ],
          Container:"flowchart-canvas"
        });
        jsPlumbChart.addEndpoint(nodeId.toString(), {
          uuid:nodeId.toString(),
          anchors: ['Right'],
          isTarget:true
        })
      })
      // jsPlumb.addEndpoint(nodeId.toString(),{uuid:nodeId.toString(), anchor:'Top', isTarget:true});
    }