foreach 在 table 行除以 5

Question

如何在 table 中显示每 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>

Answer 2

在vue JS循环中有第二个参数代表索引。

    <tr v-for="(item,index) in data">
     <td v-if="(index % 5 == 0)">{{item}}</td>
   <tr>

因此您可以使用此索引对其应用条件。例如使用取模来验证索引是否是 5

的倍数

Answer 3

您可以创建一个 computed 属性来将数组分组为 5 个项目的块。然后遍历二维数组并创建行和列

new Vue({
  el: '#example',
  data: {
    array: [1, 2, 3, 4, 5, 6]
  },
  computed: {
    grouped: function() {
      const n = 5; // chunk size
      const length = Math.ceil(this.array.length / n);
      return Array.from({ length }, (_, i) => this.array.slice(i * n, (i + 1) * n))
    }
  }
})

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

<table id="example">
  <tr v-for="row in grouped">
    <td v-for="column in row">{{column}}</td>
  </tr>
</table>

Chunk code reference

Answer 4

您可以根据块大小在 while 循环中使用 splice 方法，您可以将其转换为二维数组。

代码段

new Vue({
  el: '#example',
  data: {
    array: [1, 2, 3, 4, 5, 6]
  },
  computed: {
    lists: function() {
      const n = 5, // chunk size
        gdata = [],
        data = this.array;

      while (data.length) {
        gdata.push(data.splice(0, n));
      }
      return gdata;
    }
  }
})

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

<table id="example">
  <tr v-for="row in lists">
    <td v-for="column in row">{{column}}</td>
  </tr>
</table>

foreach 在 table 行除以 5

foreach at table rows divided by 5

javascript

vue.js

vue-cli