发布于 

Vue v-for list数据循环 每3或者(n)个一组

template 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-carousel-item v-for="(item,index) in listTemp" :key="index">
<div style="margin-left: 17%;margin-right: 10%;margin-top: 20px;">
<div v-for="o in item" :key="o" style="display:inline;padding: 0.6rem">
<el-card :body-style="{ padding: '0px' }" style="width: 20%;max-height: 200px" @click.native="showDrawer(o)">
<img :src="o.imgPath" class="image">
<div style="padding: 10px;font-size:14px;display: flex;justify-content: space-between">
<span>{{ o.eventdate }}</span>
<span>{{ o.position }}</span>
</div>
</el-card>
</div>
</div>
</el-carousel-item>

computed 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
computed: {
listTemp() {
let index = 0
const count = 4
const arrTemp = []
const experts = this.alarmImgList
for (let i = 0; i < this.alarmImgList.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(experts[i])
}
return arrTemp
}
}

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

本站由 @银河小徐 创建,使用 Stellar 作为主题。

本站由又拍云 CDN 分发,京 ICP 备 2020040230 号。

载入天数...载入时分秒...访客数: 人,总访问量: 次。