在 Vuetify 中，如何在 <v-data-table> 的每一行添加一个按钮？

Question

下面的屏幕截图是https://vuetifyjs.com/en/components/data-tables/中的示例 它的代码是：

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

我想知道如何<v-btn>在每一行中添加 a 以导航到另一个组件？
例如，在每行中添加一列，其中包含名为“查看”的按钮，然后单击它们将导航到包含相应甜点详细信息的页面。

谢谢！

Answer 1

您可以添加一个名为 的标头action。

  { text: "", value: "action" }

然后用slot.

<v-data-table :headers="headers" :items="desserts">
  <template v-slot:item.action="{ item }">
    <v-btn>OPEN</v-btn>
  </template>
</v-data-table>

https://vuetifyjs.com/en/components/data-tables/#simple-checkbox