如何生成每行有 3 列的表答案

【问题标题】：How to generating table that will have 3 columns per row如何生成每行有 3 列的表
【发布时间】：2021-05-20 15:28:21
【问题描述】：

我使用 Vue 2。

我从集合中生成表格：

  <table class="table table-striped table-bordered">
      <tbody>
        <tr v-for="(type, typeIndex) in getAllUpgradeTypes" :key="typeIndex">
          <td>
            <imageDesc
              style="margin-left: 10px"
              :title="type"
              :text="'Select an Option'"
              :zoneId="selectedZone.id"
            />
          </td>
        </tr>
      </tbody>
    </table>

目前创建的表格多行，每行只有一列，列内显示一项。

我的问题是如何生成每行包含 3 列的表？

【问题讨论】：

你能把 3 个元素放在下吗？

标签： javascript vue.js ecmascript-6

【解决方案1】：

您至少可以使用几种不同的模式。一种涉及在模板中迭代数据之前重新排列数据，另一种则不需要。我会告诉你两个。

在这两种情况下，使用数据属性来保存列数：

data: () => ({
  numCols: 3
})

将数据重新组织成二维数组

不是一个包含所有项目的数组，而是使用计算将数据重新组织成一个多维的行和列数组：

computed: {
  arrangedData() {
    const arrangedData = [];
    this.getAllUpgradeTypes.forEach((item, index) => {
      if (index % this.numCols === 0) {
        arrangedData.push([])
      }
      arrangedData[arrangedData.length - 1].push(item);
    });
    return arrangedData;
  }
}

像这样迭代数据：

<table class="table table-striped table-bordered">
  <tr v-for="(row, rowIndex) in arrangedData" :key="rowIndex">
    <td v-for="(type, typeIndex) in row" :key="`${rowIndex}:${typeIndex}`">
      {{ type }}
    </td>
  </tr>
</table>

这是一个演示：

new Vue({
  el: "#app",
  data: () => ({
    getAllUpgradeTypes: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'],
    numCols: 3
  }),
  computed: {
    arrangedData() {
      const arrangedData = [];
      this.getAllUpgradeTypes.forEach((item, index) => {
        if (index % this.numCols === 0) {
          arrangedData.push([])
        }
        arrangedData[arrangedData.length - 1].push(item);
      });
      return arrangedData;
    }
  }
});

td { width: 40px }

<div id="app">
  <table class="table table-striped table-bordered">
    <tr v-for="(row, rowIndex) in arrangedData" :key="rowIndex">
      <td v-for="(type, typeIndex) in row" :key="`${rowIndex}:${typeIndex}`">
        {{ type }}
      </td>
    </tr>
  </table>
</div>

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

-或-

计算行数

另一种方法是使用计算来计算行数。它的代码更少，但是type 在模板中得到了一个丑陋的语法：

computed: {
  numRows() {
    return Math.ceil(this.getAllUpgradeTypes.length / this.numCols);
  }
}

像这样迭代数据：

<table class="table table-striped table-bordered">
  <tr v-for="(row, indexRow) in numRows">
    <td v-for="(col, indexCol) in numCols">
      {{ getAllUpgradeTypes[(indexRow * numCols) + indexCol] }}
    </td>
  </tr>
</table>

这是一个演示：

new Vue({
  el: "#app",
  data: () => ({
    getAllUpgradeTypes: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'],
    numCols: 3
  }),
  computed: {
    numRows() {
      return Math.ceil(this.getAllUpgradeTypes.length / this.numCols);
    }
  }
});

td { width: 40px; }

<div id="app">
  <table>
    <tr v-for="(row, indexRow) in numRows" :key="indexRow">
      <td v-for="(type, indexCol) in numCols" :key="`${rowIndex}:${typeIndex}`">
        {{ getAllUpgradeTypes[(indexRow * numCols) + indexCol] }}
      </td>
    </tr>
  </table>
</div>

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

这些选项可能有一些变化，但我认为第一个可能是模板清晰的最佳选择。

【讨论】：