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

Question

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

我有一个代码笔 this example

我想要相同的功能，但 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-icon 应该在模板下面，但我一直收到这个错误

'v-slot' directive must be owned by a custom element, but 'td', 'div', 'template' is not

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

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

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>

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

Converting Vuetify 1.x v-slot activator to 2.x via v-data-table

vue.js

vuetify.js

v-slot

v-data-table