侧边栏壁纸
博主头像
银河小徐博主等级

A Good Boy ⛵️⛵️⛵️

  • 累计撰写 42 篇文章
  • 累计创建 39 个标签
  • 累计收到 10 条评论

目 录CONTENT

文章目录
Vue

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

银河小徐
2021-08-26 / 0 评论 / 10 点赞 / 57 阅读 / 989 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-06-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

template 代码:

<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 代码:

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
    }
}
10

评论区