这是一个创建于 1948 天前的主题，其中的信息可能已经有所发展或是发生改变。
正常写没啥问题，但要命的是原来的结构是用 element-ui 的栅格写的， 结构是每一行一个 el-row 套 3 个 item，总计 20 多个 item 要遍历上去，逢三换行。 这种情况怎么写，，， 是原来的需求变动了才要改的，，尽可能不要改太多
8 条回复 • 2019-07-26 17:55:27 +08:00
 |
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 楼那个解法思路是最直接了当的
|
Select Language