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

Question

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

我有一组看起来像这样的对象：

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

我想在具有两列（id 和产品）的 v-data-table 中显示数据，在嵌套的 v-data-table.

中显示产品项

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

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

      </v-data-table>

而不是嵌套 table 我得到

[object Object],[object Object]

如何在 tsx 文件中使用模板 v-slot？更一般地说，如何 'translate' vuetify js 到 tsx（文档）？

再次感谢

Answer 1

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

我制作了一个代码笔，您可以查看 Codepen。至于将它翻译成 tsx，我帮不了你，因为我没有使用过它，但如果你掌握了如何在 vuetify 部分进行翻译的概念，你应该很好！

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

V-data-table template v-slot syntax

vue.js

tsx

vuetify.js