javascript - 表行处的 foreach 除以 5

Question

如何显示每 5 日创建一个新行的表中的数据 <td> ?

例子

data: [1,2,3,4,5,6];

成分:

<tr v-for="item in data">
   <td>{{item}}</td>
<tr>

预期的:

| 1 | 2 | 3 | 4 | 5 |

| 6 |

Answer 1

这是一个易于理解的解决方案，使用 reduce :

new Vue({
  el: '#root',
  data: {
    origin: [1, 2, 3, 4, 5, 6, 7]
  },
  computed: {
    chunkedOrigin: function() {
      return this.origin.reduce((result, item, index) => { 
        const chunkIndex = Math.floor(index/5)

        if(!result[chunkIndex]) {
          result[chunkIndex] = [] // start a new chunk
        }
        result[chunkIndex].push(item)

        return result;
      }, []);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<table id="root" style="border: 1px solid black">
  <tr v-for="row in chunkedOrigin">
    <td v-for="column in row" style="border: 1px solid black">{{column}}</td>
  </tr>
</table>