How does vue automatically generate tables and automatically insert corresponding data in flag locations?

want to generate a table according to the data format of tabledata. If there are flag=true elements in the tabledata array, find the corresponding dataid data to fill in under the elements of the same column of flag=true. The data layer in the testdata array corresponds to a td grid.

if you simply arrange the cells in order, you can insert the data in a few loops, but is there any good way to implement this table that needs to locate and insert data according to flag and 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:[]}
]                
Menu