vuetify 简单表。将嵌套对象属性转换为 <td> 列

Question

我正在使用 vuetify 2.1 和一个简单的嵌套表。在我的数据模型中使用以下数据结构：

groups:[
  {
      style:"X",
      colours:"colours",
      sizes:"standard",
      marketplaces:[
        {
          markeplace:"UK",
          pricelists:["A","B","C"]
        },
        {
          markeplace:"EU",
          pricelists:["D","E","F"]
        },
        {
          markeplace:"ROW",
          pricelists:["G","H","I"]
        },
      ]
  },
  {
      style:"X",
      colours:"Black/White",
      sizes:"standard",
      marketplaces:[
        {
          markeplace:"UK",
          pricelists:["X","Y","Z"]
        },
        {
          markeplace:"EU",
          pricelists:["P","Q","R"]
        },
        {
          markeplace:"ROW",
          pricelists:["S","T","U"]
        },
      ]
  }
]

我想要实现的是

记录：

• 风格
• 颜色
• 尺寸
• UK.pricelists[0]
• UK.pricelists[1]
• UK.pricelists[2]
• EU.pricelists[0]
• EU.pricelists[1]
• EU.pricelists[2]
• ROW.pricelists[0]
• ROW.pricelists[1]
• ROW.pricelists[2]

<v-simple-table
  dense
  calculate-widths
  fixed-header
  height="90vh"
>
  <template v-slot:default>
    <thead>
      <tr>
        <th>Style</th>
        <th>Colour Group</th> 
        <th>Size Group</th>
        <th>UK 1</th> 
        <th>UK 2</th> 
        <th>UK 3</th> 
        <th>EU 1</th> 
        <th>EU 2</th> 
        <th>EU 3</th> 
        <th>ROW 1</th> 
        <th>ROW 2</th> 
        <th>ROW 3</th> 
      </tr>
    </thead>
    <tbody>
      <tr v-for="group in groups" >
        <td>{{group.style}}</td>
        <td>{{group.colour}}</td>
        <td>{{group.size}}</td>
        <!-- this is where I am struggling... I need the next 9 td records to iterate through two levels of arrays. -->
        <td v-for="mkt in group.marketplaces">{{mkt.pricelists[0]}}<td>
      </tr>
    </tbody>
  </template>
</v-simple-table>

作为参考，我可以完全控制 API 和数据对象的形状，因此请随意建议一种替代文档结构。您能否在 vuetify 简单表中原生迭代多个级别 - 可能使用 array.foreach()。 是否有一个 vue 等效的 react-fragment 充当外部嵌套元素但实际上不渲染任何东西。挑战在于这是在一个表格行中，我只需要围绕该行中的一些单元格进行集合。 我是否将逻辑移动到重新映射传入组的价目表的方法。在我的情况下，所有组将具有相同顺序的相同市场，并且每个市场将具有相同数量的价目表，因此我对数组的排序或填充没有任何问题。

【问题讨论】：

Answer 1

在没有任何其他建议的情况下，我创建了一种将数据重新映射到单个数组的方法：

methods: {
     remapPricelists(style,colours,sizes){
          /* This should find a single match */
          let group = this.groups.filter(g=>{
               return g.style ==  style 
                 && g.colours == colours
                 && g.sizes == sizes
          });
          let pl =[];
          group[0].pricelists.map(plst =>{
               pl = pl.concat(plst.pricelists);
          });
          return pl;
      }
}

免责声明：我从我的实时数据中编辑了上述代码，其格式略有不同（更多外部组和不同命名的字段），因此 E&OE。在生产中，我可能会将组提取抽象为一个单独的方法，因为我将在很多地方需要它，并且可能会剥离外部数组以仅保留组对象，以便我可以访问内部数据而无需指定组数组索引。