Vue.js如何在表格中调整渲染tr

Question

我的演示示例：enter link description here

我希望每列渲染3行数据，例如

<tr>
    <td>
        <strong class="blue">[{{item.orderId}}]</strong><br>
            {{item.title}}
    </td>
    <td>
        <strong class="blue">[{{item.orderId}}]</strong><br>
        {{item.title}}
    </td>
    <td>
        <strong class="blue">[{{item.orderId}}]</strong><br>
        {{item.title}}
    </td>
</tr>

我该怎么做，谢谢你。

Answer 1

您可以切片数组并在Vue模板中使用嵌套循环。

https://jsfiddle.net/9Lf7zo4g/2/

 computed: {
   sliced: function() {
     const sliced = []
     const chunk = 3
     for(let i = 0; i < data.length; i = i + chunk) {
       sliced.push(this.data.slice(i, i + chunk))
     }
     return sliced
  }
}