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

[TomatoYuyuko]

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

[xwbz2018]

if 下标 ！= 0 && 下标 /3==0 {换行}，是这个意思嘛

[TomatoYuyuko]

@xwbz2018 #1 正常是这么写的，但是每一行的 item 们都被套在一个 el-row 标签里，

[xwbz2018]

@TomatoYuyuko #2 数据格式化一下，一维转二维，[[{}, {}, {}], [{}, {}, {}]]这样

[TomatoYuyuko]

@xwbz2018 #3 对哦，我忘了可以从数据格式下手，谢谢

[nannanziyu]

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]

@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]

el-col 设置 span=8 不行吗?

[TomatoYuyuko]

@redbuck #7 不是这个问题，6 楼那个解法思路是最直接了当的