具有可扩展行的Vue Vuetify数据表-显示多行扩展数据

Question

我想创建带有可扩展行的Vuetify表。展开的行应包含几个子行，如下图所示。

我的第一次尝试是在这里：https://codepen.io/blakex/pen/BaKXYqv

问题是这部分：

<template v-slot:expanded-item="{ item }">   
  <td>
    <p v-for="source in item.sources">{{ source.name }}</p>
  </td>
  <td>
    <p v-for="source in item.sources">{{ source.calories }}</p>
  </td>
  <td>
    <p v-for="source in item.sources">{{ source.fat }}</p>
  </td>
  <td>
    <p v-for="source in item.sources">{{ source.carbs }}</p>
  </td>
</template>

我不喜欢我必须对item.sources数组上的每一列进行迭代。我宁愿做这样的事情：

<template v-slot:expanded-item="{ item }">   
  <tr v-for="source in item.sources">
    <td>{{source.name}}</td>
    <td>{{source.calories}}</td>
    <td>{{source.fat}}</td>
    <td>{{source.carbs}}</td>
  </tr>
</template>

但是，我猜这是由于<tr>而行不通的。输出看起来像这样：

如何使其与<tr>一起使用？谢谢！