正常写没啥问题,但要命的是原来的结构是用 element-ui 的栅格写的, 结构是每一行一个 el-row 套 3 个 item,总计 20 多个 item 要遍历上去,逢三换行。 这种情况怎么写,,, 是原来的需求变动了才要改的,,尽可能不要改太多
1
xwbz2018 2019-07-26 10:23:49 +08:00
if 下标 != 0 && 下标 /3==0 {换行},是这个意思嘛
|
2
TomatoYuyuko OP @xwbz2018 #1 正常是这么写的,但是每一行的 item 们都被套在一个 el-row 标签里,
|
3
xwbz2018 2019-07-26 10:39:56 +08:00
@TomatoYuyuko #2 数据格式化一下,一维转二维,[[{}, {}, {}], [{}, {}, {}]]这样
|
4
TomatoYuyuko OP @xwbz2018 #3 对哦,我忘了可以从数据格式下手,谢谢
|
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 这个二元数组 |
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> |
7
redbuck 2019-07-26 17:49:53 +08:00
el-col 设置 span=8 不行吗?
|
8
TomatoYuyuko OP @redbuck #7 不是这个问题,6 楼那个解法思路是最直接了当的
|