DOM：<div id="myDiagramDiv" style="width:600px; height:550px; background-color: #DAE4E4;"></div>
methods:{
goIntro(){
var $=go.GraphObject.make
var diagram=$(go.Diagram,'myDiagramDiv')
// var diagram=new go.Diagram('myDiagramDiv')
// diagram.initialContentAlignment=go.Spot.Center //设置图标对齐
diagram.add(
$(go.Part,'Auto',
$(go.Shape,'Rectangle',{fill:'white'}),//表格定义为矩形
$(go.Panel,'Table',
{
// defaultRowSeparatorStroke:'black',//设置表格行和列线颜色
// defaultColumnSeparatorStroke:'red',
defaultSeparatorPadding:10,//设置单元格padding
},
//row 0
$(go.RowColumnDefinition,{row:0,background:'dodgerblue'}),//设置第一行的背景
$(go.Panel,'TableRow',{row:0},
$(go.Shape,'Triangle',{column:0,desiredSize:new go.Size(10,10),fill:'lime',alignment:go.Spot.Left}),
$(go.TextBlock,'Title',{column:1,columnSpan:2}),//columnSpan设置单元格跨越两行
$(go.Shape,'Rectangle',{column:3,desiredSize:new go.Size(10,10),fill:'cyan',alignment:go.Spot.Right}),
),
//row 1
$(go.RowColumnDefinition,{row:1,separatorStroke:'black'}),//设置第二行背景
$(go.Panel,'TableRow',{row:1},
$(go.TextBlock,'(1,0)',{column:0}),
$(go.TextBlock,'(1,1)',{column:1}),
$(go.TextBlock,'(1,2)',{column:2}),
$(go.TextBlock,'(1,3)',{column:3}),
)
)
)
)
}
效果图：
