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。在生产中，我很可能会将组提取抽象为单独的方法，因为我将在很多地方需要它，并且可能会剥离外部数组以仅离开组对象，以便我无需指定即可访问内部数据组数组索引。

验证简单表。将属性化的嵌套对象转换为<td>列

1 个答案: