在VueJS中将数据拆分为行和列

<template>
  <div>
    <div v-for="(row, rowIndex) in rows" :key="rowIndex">
      <div v-for="(column, columnIndex) in row" :key="columnIndex">
        {{ column }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      columns: 3, // 列数
    };
  },
  computed: {
    rows() {
      const rows = [];
      const { data, columns } = this;
      const rowCount = Math.ceil(data.length / columns); // 计算行数
      for (let i = 0; i < rowCount; i++) {
        const start = i * columns;
        const end = start + columns;
        rows.push(data.slice(start, end));
      }
      return rows;
    },
  },
};
</script>