V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
TomatoYuyuko
V2EX  ›  问与答

关于 v-for 写逢三换行的问题..

  •  
  •   TomatoYuyuko · 2019-07-26 10:19:56 +08:00 · 2934 次点击
    这是一个创建于 1707 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正常写没啥问题,但要命的是原来的结构是用 element-ui 的栅格写的, 结构是每一行一个 el-row 套 3 个 item,总计 20 多个 item 要遍历上去,逢三换行。 这种情况怎么写,,, 是原来的需求变动了才要改的,,尽可能不要改太多

    8 条回复    2019-07-26 17:55:27 +08:00
    xwbz2018
        1
    xwbz2018  
       2019-07-26 10:23:49 +08:00
    if 下标 != 0 && 下标 /3==0 {换行},是这个意思嘛
    TomatoYuyuko
        2
    TomatoYuyuko  
    OP
       2019-07-26 10:33:26 +08:00
    @xwbz2018 #1 正常是这么写的,但是每一行的 item 们都被套在一个 el-row 标签里,
    xwbz2018
        3
    xwbz2018  
       2019-07-26 10:39:56 +08:00
    @TomatoYuyuko #2 数据格式化一下,一维转二维,[[{}, {}, {}], [{}, {}, {}]]这样
    TomatoYuyuko
        4
    TomatoYuyuko  
    OP
       2019-07-26 10:45:58 +08:00
    @xwbz2018 #3 对哦,我忘了可以从数据格式下手,谢谢
    nannanziyu
        5
    nannanziyu  
       2019-07-26 10:56:56 +08:00   ❤️ 1
    const list = [0,1,2,3,4,5,6,7,8,9,10,11,12];
    list.reduce((rv,x)=>{ if(rv.idx % 3 === 0) { rv.group.push([x]); } else { rv.group[rv.group.length - 1].push(x); } ; rv.idx++; return rv;},{idx:0, group:[]}).group
    用上面这一行来 group 你的数据源
    然后 v-for 这个二元数组
    xwbz2018
        6
    xwbz2018  
       2019-07-26 10:58:52 +08:00   ❤️ 1
    @TomatoYuyuko #4 不用谢,不过刚刚试了不改数据用两个循环的方式,可以看下
    list: [{id:1, name:"test1"}]

    <tr v-for="(d, i) in list" v-if="i==0||i%3==0">
    <td v-for="n in 3">[{{list[i+n-1].id}}]{{list[i+n-1].name}}</td>
    </tr>
    redbuck
        7
    redbuck  
       2019-07-26 17:49:53 +08:00
    el-col 设置 span=8 不行吗?
    TomatoYuyuko
        8
    TomatoYuyuko  
    OP
       2019-07-26 17:55:27 +08:00
    @redbuck #7 不是这个问题,6 楼那个解法思路是最直接了当的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5490 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 08:24 · PVG 16:24 · LAX 01:24 · JFK 04:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.