在 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> 以导航到另一个组件？
就像，在每一行中添加一个包含称为“查看”按钮的列，然后单击它们将导航到包含相应甜点详细信息的页面。

谢谢！

Answer 1

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

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

然后用slot指定这个header的渲染。

<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