为 table 重组 objects 数组

Question

我有一个 table header:

      fields: [
        'description',
        'potSize',
        'price',
      ],

我有我的 table 数据：

      testArray: [
        {
          price: '10,00',
          potSize: 'C2',
          description: 'desc',
        },
        {
          price: '10,00',
          potSize: 'C2',
          description: 'rwefv ',
        },
        {
          price: '10,00',
          potSize: 'C2',
          description: '',
        },
      ],

两者都在 table 组件中读取

    <thead>
      <tr>
        <th v-for="item in fields" :key="item">{{ item }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, key) in testArray" :key="key">
        <td v-for="(keys, col) in item" :key="keys">
          {{ item[col] }}
        </td>
      </tr>
    </tbody>

如您所见，是 header 行和数据行的一个键不匹配。我需要按 headers 顺序显示 testArray key-value 对。我怎样才能最有效地做到这一点？

预期输出：

Answer 1

在内循环中，循环遍历fields而不是item，然后通过key:

查找对应字段

  <tr v-for="(item, key) in testArray" :key="key">
    <td v-for="col in fields" :key="col">
      {{ item[col] }}
    </td>
  </tr>

为 table 重组 objects 数组

Restructure a objects array for table

javascript

arrays

html-table

object

vue.js