vue+antv@g6实现表格内容连接以及表格内容可编辑

 实现效果图

话不多说，直接上代码：

init(){
      const containerRef = this.$refs.containerRef
      this.graph = new G6.Graph({
        container: containerRef,
        height:this.content_height,
        defaultNode: {
            type: 'image',
            size: [20, 20],
            clipCfg: {
              show: false,
              type: 'circle',
              r: 30,
              style: {
                lineWidth: 1,
              },
            },
          },
      });
      const data = {
        nodes:[],
        edges:[]
      }
      var row_index = 0
      const nodeList = (list) => {
        list.forEach((item, index) => {
          row_index = row_index + 1
          if (item.list.length==0) {
            let image_url = ""
            var location_x = 160;
            var location_y = 86+36*row_index;
            if(item.process){
              image_url = "jg"
              location_x = location_x
            }else if(item.move){
              image_url = "move"
              location_x = location_x + 80*1
            }else if(item.save){
              image_url = "save"
              location_x = location_x + 80*2
            }else if(item.check){
              image_url = "check"
              location_x = location_x + 80*3
            }else if(item.rework){
              image_url = "fg"
              location_x = location_x + 80*4
            }else if(item.discard){
              image_url = "bf"
              location_x = location_x + 80*4 + 90
            }else if(item.return_goods){
              image_url = "back"
              location_x = location_x + 80*5 + 100
            }
            var node = {
              id: item.no,
              x: location_x,
              y: location_y,
              anchorPoints: [
                [0.5, 0],//上中
                [0, 0.5],//左中
                [1, 0.5],//右中
                [0.5, 1],//下中
              ],
              img: require(`@/assets/flow_images/${image_url}.png`)
            }
            data.nodes.push(node)
            var node_size = data.nodes.length
            if(node_size>1){
              //x轴对比,判定是左连接还是又连接
              var last_x = data.nodes[node_size-2].x
              var now_x = data.nodes[node_size-1].x
              var targetAnchor = 0;
              if(last_x>now_x){
                targetAnchor = 2
              }else if ( last_x<now_x) {
                targetAnchor = 1
              }
              data.edges.push({
                source: data.nodes[node_size-2].id,
                target: data.nodes[node_size-1].id,
                sourceAnchor: 3,
                targetAnchor,
                type:'polyline',
                style:{
                  endArrow: true,
                  stroke:'#F6BD16'
                }
              })
            }
          }else{
            nodeList(item.list)
          }
        })
      }
      nodeList(this.datas)
      this.content_height = 100+36*row_index
      this.graph.changeSize(this.content_width, this.content_height)
      this.graph.data(data);
      this.graph.render();
    }

<div ref="containerRef" class="overlap-element1" >
        <vxe-grid ref="process_table" id="process_table"  show-overflow
          v-bind="gridOptions" :border="true" :data="datas"
          size="mini"
          @toggle-tree-expand="expandTree"
          :toolbar-config="tableToolbar" :loading="loading"
          @cell-click="cellClickEvent"
          :menu-config="tableMenu"
          @menu-click="contextMenuClickEvent">
          <template #loading>
            <div class="first-loading-wrp">
              <div class="loading-wrp" style="padding:20px">
                <span class="dot dot-spin">
                  <i></i>
                  <i></i>
                  <i></i>
                  <i></i>
                </span>
              </div>
              <div style="font-size:14px;color:#1890ff;font-weight: bold;">加载中...</div>
            </div>
          </template>
          <template #process_header="{ column }">
            <span style="color:#ffba00">
              {{ column.title }}<br>
              <img :src="process_icon[column.property]" style="width: 18px;">
            </span>
          </template>
          <template #equip_default="{ row,column }">
            <template v-if="row[column.property]!=null">
              <vxe-button v-for="(item,index) in row[column.property].split(',')" :key="index" status="warning" >
                {{ item }}
              </vxe-button>
            </template>
          </template>
          <template #toolbar_buttons>
            <span style="margin-left: 10px;font-size: 20px;color:#ff5500;" ><i class="vxe-icon-warning-circle" title="若需添加或编辑内容，请在已有内容的文本框中点击右键操作！"></i></span>
            <span style="margin-left: 10px;" />
            <!-- <el-button type="info" size="mini" round >
              <i class="vxe-icon-download"></i>
              导出
            </el-button> -->
          </template>
        </vxe-grid>
      </div>

这里面还涉及画布与表格同步移动，还有部分样式修改

<style scoped>
  .vxe-grid.size--mini {
    position: absolute;
    font-size: 12px;
    width:100%;
  }
  .content {
    position: relative; /* 容器相对定位 */
    width:v-bind(content_width+'px');
    height:v-bind(div_height+'px');
    overflow-x: scroll; /* 显示滚动条 */
    overflow-y: scroll;
  }
  .overlap-element1, .overlap-element2 {
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 150%;
    background-color: #f0f0f0;
  }
</style>
<style>
  canvas {
    display: inline-block;
    position: relative;
    pointer-events: none;
  }
</style>

业务需求太磨人了，网上案例也特别少，以上就是上面效果图实现代码，分享给有需要的人。