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

Mr. X

发布于：2020-07-06

Vue

0 条评论

字数统计：210字

阅读时长≈ 1分钟

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