V-data-table模板v-slot语法

Question

您好，感谢您阅读我的问题。

我有一个对象数组，看起来像这样：

[{
  id=1,
  products= [a,b,c]
 },
 {
  id=2,
  products= [d,e,f]
 }]

我想在一个有两列(id和products)的v- data -table中显示数据，并在一个嵌套的v-data-table中显示products item。

到目前为止，我发现我应该使用模板和v-slot，但我没有找到正确的方法。

<v-data-table            
        item-key="id"
        items={products}
      >
        <template v-slot="">
          <v-data-table> ... </v-data-table>
        </template>

      </v-data-table>

而不是我得到的嵌套表

[object Object],[object Object]

如何在tsx文件中使用模板v-slot？更普遍的是，如何将vuetify js‘翻译’成tsx (文档)？

再次感谢

Answer 1

您已经创建了一个正确的插槽，但您需要告诉vuetify您要访问哪个插槽。要访问所有行的默认<td>槽，只需使用v-slot:body="{ items }"并将项目传递给它，这样就可以为每列创建一个视图。(如果向下滚动，可用插槽将在此处列出Vuetify doc。每个组件都有它们)

我已经做了一个codepen，你可以查看Codepen。至于把它翻译成tsx，我帮不了你，因为我没有用过它，但是如果你掌握了如何在vuetify部分做它的概念，你应该会很好！