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

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

  •  
  •   TomatoYuyuko · 117 天前 · 955 次点击
    这是一个创建于 117 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 回复  |  直到 2019-07-26 17:55:27 +08:00
        1
    xwbz2018   117 天前
    if 下标 != 0 && 下标 /3==0 {换行},是这个意思嘛
        2
    TomatoYuyuko   117 天前
    @xwbz2018 #1 正常是这么写的,但是每一行的 item 们都被套在一个 el-row 标签里,
        3
    xwbz2018   117 天前
    @TomatoYuyuko #2 数据格式化一下,一维转二维,[[{}, {}, {}], [{}, {}, {}]]这样
        4
    TomatoYuyuko   117 天前
    @xwbz2018 #3 对哦,我忘了可以从数据格式下手,谢谢
        5
    nannanziyu   117 天前   ♥ 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 这个二元数组
        6
    xwbz2018   117 天前   ♥ 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>
        7
    redbuck   116 天前
    el-col 设置 span=8 不行吗?
        8
    TomatoYuyuko   116 天前
    @redbuck #7 不是这个问题,6 楼那个解法思路是最直接了当的
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4541 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 06:08 · PVG 14:08 · LAX 22:08 · JFK 01:08
    ♥ Do have faith in what you're doing.