updateDiagramFromData: function() { this.$refs.diag.updateDiagramFromData(); // 数据变化时调用组件中的更新方法 }, changedSelection: function(e) { let node = e.diagram.selection.first(); if (node instanceof go.Node) { this.currentNode = node; this.currentNodeText = node.data.text; this.selectNode(node.data); } else { this.currentNode = null; this.currentNodeText = ''; } },
最后，将需要展示的数据转化为需要的格式就可以啦。
流程图所需格式如下：
无分组： "nodeDataArray": [ {"key":1, "text":"Alpha", "color":"lightblue"}, {"key":2, "text":"Beta", "color":"orange"}, {"key":3, "text":"Gamma", "color":"lightgreen"}, {"key":4, "text":"Delta", "color":"pink"} ] "linkDataArray": [ {"from":1, "to":2}, {"from":1, "to":3}, {"from":3, "to":4} ] 有分组： var nodeDataArray = [ { key: "Alpha" }, { key: "Beta", group: "Omega" }, { key: "Gamma", group: "Omega" }, { key: "Omega", isGroup: true }, { key: "Delta" } ]; var linkDataArray = [ { from: "Alpha", to: "Beta" }, { from: "Beta", to: "Gamma" }, { from: "Omega", to: "Delta" } ];