vue如何实现自动生成表格并且在flag位置自动插入对应的数据？

Question

想要根据tabledata的数据格式生成一个表格，tabledata数组中如果有flag=true的元素，要找到对应的dataid的数据给在同一列flag=true的元素下方填充进去，testdata数组里的data一层对应一个td格子。

如果只是单纯的一个个格子按顺序排列，用几个循环就可以把数据插入进去，但是这种要根据flag和dataid来定位插数据的表格有什么好的实现思路？

生成表格的格式大概像这样：
      测试数据1    测试数据2
测试数据3 测试数据4 测试数据5
   喵     【格子】     汪
【格子】   【格子】    汪汪
【格子】   【格子】   汪汪汪
测试数据6  【格子】  【格子】
   吱      【格子】  【格子】
                
//表格数组如下
var tabledata=[
                tr:[
                    {id:{x:A,y:1},val：'测试数据1',flag：false,style:{rowspan:0,colspan:2},dataid:''},
                    {id:{x:C,y:1},val：'测试数据2',flag：false,style:{rowspan:0,colspan:0},dataid:''}
                    ],
                 tr:[
                     {id:{x:A,y:2},val：'测试数据3',flag：true,style:{rowspan:0,colspan:0},dataid:'test3'},
                     {id:{x:B,y:2},val：'测试数据4',flag：true,style:{rowspan:0,colspan:0},dataid:''},
                     {id:{x:C,y:2},val：'测试数据5',flag：true,style:{rowspan:0,colspan:0},dataid:'test5'}
                    ],
                 tr:[
                    {id:{x:A,y:1},val：'测试数据6',flag：true,style:{rowspan:0,colspan:0},dataid:'test6'}
                    ],    
                ]
//测试数据
var testdata=[
    {id:'test3',data:['喵']},
    {id:'test5',data:['汪','汪汪','汪汪汪']},
    {id:'test6',data:[吱]}
]