vue 中引用gojs绘制E-R图

首先，在vue项目中安装gojs的依赖包，并在项目中引入。

创建tablePreview.vue

<style>
  #sample{
    position: relative;
    margin: 20px;
  }
  #myOverviewDiv {
    position: absolute;
    width:225px;
    height:100px;
    top: 10px;
    left: 10px;
    background-color: aliceblue;
    z-index: 300; /* make sure its in front */
    border: solid 1px blue;
  }
  #mySearch{
    width: 60%;
    float: right;
    margin-right: 20px;
  }
  .input_button{
    margin: 20px;
  }
  #entityRelation{
    width: 100%;
    height: 700px;
    border:1px solid #cccccc;
  }
  .returnShang{
    color: #fff;
    text-underline: none;
  }
  .returnShang:hover{
    color: #fff;
    text-underline: none;
  }
</style>
<template>
  <div>
    <div class="input_button">
      <Button type="success"><router-link to="/dataSourceAdmin" class="returnShang">返回上一级</router-link></Button>
      <Button type="primary" @click="searchDiagram()" style="float: right">Search</Button>
      <Input placeholder="请输入要查询的表名" id="mySearch" v-model="searchText" @keyup.enter.native="searchDiagram()"></Input>

    </div>
    <div id="sample">
      <div id="entityRelation"></div>
      <div id="myOverviewDiv"></div>
    </div>
  </div>
</template>
<script src="./tablePreview.js"></script>

在js文件中绘制E-R图，注意：初始化方面必须放在mounted中调用。

tablePreview.js如下

export default{
  data() {
    return {
      myDiagram: '',
      searchText: '',
      tabViewList: '',
      tabRelView: ''
    }
  },
  mounted() {
    var dataSoureId = JSON.parse(sessionStorage.getItem("previewInfo")).datasourceId
    let _this = this
    _this.$ajax.post(_this.cfg.api.dataPoolAdmin.tableRelView +'?datasourceId=' + dataSoureId)
      .then(function (res) {
        if(res.data.result) {
          _this.tabViewList = res.data.data.tabViewList
          _this.tabRelView = res.data.data.tabRelViewList
          _this.init()
        }
      })

  },
  methods: {
    init() {
      var go = this.go
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var a = go.GraphObject.make;  // 定义模板

      this.myDiagram =
        a(go.Diagram, 'entityRelation',  // 必须命名或引用div html元素
          {
            initialContentAlignment: go.Spot.Center,
            allowDelete: false,
            allowCopy: false,
            layout: a(go.ForceDirectedLayout),
            "undoManager.isEnabled": true
          });

      // defi