“Error: GraphObject.make requires a class function or GoJS class name or name of not: ScrollingTabl

哪位大神看一下,我这个是啥问题,看了好多,都没有解决方案,谢谢好心人

<template>
  <div ref="myDiagramDiv" style="width: 100%; height: 500px;border: 1px solid red;"></div>
</template>

<script>
import go from 'gojs';
export default {
  mounted() {
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      const $ = go.GraphObject.make;
      const diagram = $(go.Diagram, this.$refs.myDiagramDiv, {
        PartResized: (e) => {
          const node = e.subject;
          const scroller = node.findObject("SCROLLER");
          if (scroller !== null) scroller._updateScrollBar(scroller.findObject("TABLE"));
        }
      });

      diagram.nodeTemplate =
        $(go.Node, "Vertical",
          {
            selectionObjectName: "SCROLLER",
            resizable: true,
            resizeObjectName: "SCROLLER",
            portSpreading: go.Node.SpreadingNone
          },
          new go.Binding("location").makeTwoWay(),
          $(go.TextBlock,
            { font: "bold 14px sans-serif" },
            new go.Binding("text", "key")),
          $(go.Panel, "Auto",
            $(go.Shape, { fill: "white" }),
            $("ScrollingTable",
              {
                name: "SCROLLER",
                desiredSize: new go.Size(NaN, 60),  // fixed width
                stretch: go.GraphObject.Fill,       // but stretches vertically
                defaultColumnSeparatorStroke: "gray",
                defaultColumnSeparatorStrokeWidth: 0.5
              },
              new go.Binding("TABLE.itemArray", "items"),
              new go.Binding("TABLE.column", "left", function (left) { return left ? 2 : 0; }),
              new go.Binding("desiredSize", "size").makeTwoWay(),
              {
                "TABLE.itemTemplate":
                  $(go.Panel, "TableRow",
                    {
                      defaultStretch: go.GraphObject.Horizontal,
                      fromSpot: go.Spot.LeftRightSides,
                      toSpot: go.Spot.LeftRightSides,
                      fromLinkable: true,
                      toLinkable: true
                    },
                    new go.Binding("portId", "name"),
                    $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                    $(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
                  ),
                "TABLE.defaultColumnSeparatorStroke": "gray",
                "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
                "TABLE.defaultRowSeparatorStroke": "gray",
                "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
                "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
              }
            )
          )
        );

      diagram.model = $(go.GraphLinksModel,
        {
          linkFromPortIdProperty: "fromPort",
          linkToPortIdProperty: "toPort",
          nodeDataArray: [
            {
              key: "Alpha", left: true, location: new go.Point(0, 0), size: new go.Size(100, 50),
              items: [
                { name: "A", value: 1 },
                { name: "B", value: 2 },
                { name: "C", value: 3 },
                { name: "D", value: 4 },
                { name: "E", value: 5 },
                { name: "F", value: 6 },
                { name: "G", value: 7 }
              ]
            },
            {
              key: "Beta", location: new go.Point(150, 0),
              items: [
                { name: "Aa", value: 1 },
                { name: "Bb", value: 2 },
                { name: "Cc", value: 3 },
                { name: "Dd", value: 4 },
                { name: "Ee", value: 5 },
                { name: "Ff", value: 6 },
                { name: "Gg", value: 7 },
                { name: "Hh", value: 8 },
                { name: "Ii", value: 9 },
                { name: "Jj", value: 10 },
                { name: "Kk", value: 11 },
                { name: "Ll", value: 12 },
                { name: "Mm", value: 13 },
                { name: "Nn", value: 14 }
              ]
            }
          ],
          linkDataArray: [
            { from: "Alpha", fromPort: "D", to: "Beta", toPort: "Ff" },
            { from: "Alpha", fromPort: "A", to: "Beta", toPort: "Nn" },
            { from: "Alpha", fromPort: "G", to: "Beta", toPort: "Aa" }
          ]
        });
    }
  }
};
</script>

<style>
#myDiagramDiv {
  width: 100%;
  height: 500px;
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值