重构表的对象数组

Posted 2023-02-22

【中文标题】重构表的对象数组

【英文标题】：Restructure a objects array for table

【发布时间】：2021-06-18 12:02:38

【问题描述】：

我有一个表头：

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

我有我的表格数据：

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

两者都在表格组件中读取

    <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>

如您所见，标题行和数据行关键不匹配。我需要按标题顺序显示 testArray 键值对。我怎样才能最有效地做到这一点？

预期输出：

【参考方案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>