通过v-data-table将Vuetify 1.x v-slot激活器转换为2.x

Question

我有一段来自Veutilify 1.5.6的工作代码，其中包括一个数据表内部的图标，单击该图标时会显示一个菜单。单击时，激活器将显示已激活的列表。

我有一个代码笔，上面有这个例子

我想要相同的功能，但Vuetify 2没有slot="activator"。

看起来他们使用带有模板标记的v-slot:activator="{ on }"，但我无法复制它。

这是我的尝试。

<v-data-table
:headers="labels"
:items="data"
>
<template v-slot:[`item.statusIcon`]="{ item }">
<td style="cursor: pointer;">
<v-icon :class="item.status">{{item.statusIcon}}
<template v-slot:activator="{ on }">
<v-list>
<v-list-item
v-on="on"
v-for="(status, index) in statusItems"
:key="index"
:class="status.title"
@click="setStatus(item, status.title)"
>{{ status.title }}></v-list-item>
</v-list>
</template>
</v-icon>
</td> 
</template>
</v-data-table>

我肯定遗漏了一些小东西，我知道v图标应该在模板下，但我一直收到这个错误

"v-slot"指令必须由自定义元素所有，但"td"、"div"、"template"不是

我找到了这个线程，但仍然没有帮助。

如有任何帮助，将不胜感激

Answer 1

您应该用v-menu组件包装图标，然后使用此图标作为菜单激活器：

<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-icon   v-on="on" :class="item.status">{{item.statusIcon}}
</v-icon>
</template>
<v-list>
<v-list-item

v-for="(status, index) in statusItems"
:key="index"
:class="status.title"
@click="setStatus(item, status.title)"
>{{ status.title }}></v-list-item>
</v-list>
</v-menu>