Vue使用v-for实现图表的n*m型排布样式

问题来源

最近在做一个后台管理系统，有很多图表需要展示，需要排列成 n * m 的样式。翻了很多网上的代码都不好用，要么代码太麻烦，要么显示不符合要求，干脆就自己写了一个。

示例代码

项目中使用了iView UI作为UI组件，实例代码中的<Row>和<i-col>均来自此UI库

该示例代码功能为一页最多显示 3 * 3 个图表

<template>
  <div v-for="n in graphIndex" v-bind:key="n">
    <Row v-if="insideGraphData.length > n">
      <i-col :span="parseInt(24 / graphsPerLine)" v-for="graph in insideGraphData.slice(n, n + graphsPerLine)" v-bind:key="graph.id"><Graph :description="这个标签随便写的，记得替换" :data="graph.data"/></i-col>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    currentPageSize: 9,
    graphIndex: [0, 3, 6],
    graphsPerLine: 3,
    insideGraphData: [{
      id: '1',
      data: {}
    },
    {
      id: '2',
      data: {}
    }]
  }
}
</script>