账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue如何实现自动生成表格并且在flag位置自动插入对应的数据?
    22
    0

    想要根据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:[吱]}
    ]                
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部