Vuetify Labs：如何在VDataTable中使用插槽渲染图标

我想在VDataTable的某一列中渲染图标，请问在Vuetify3最新的Lab版本中是否可以为VDataTable使用插槽？

在Vuetify 2.x中可按如下方式实现：

<template>
  <v-data-table
    :headers="headers"
    :items="tableData"
    :items-per-page="10"
  >
    <template #[`item.actions`]="{ item }">
      <v-icon
        icon="$magnifier"
        style="color: #0692bc"
        class="inline cursor-pointer mr-4"
        @click="action(item)"
      />
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    tableData: [
      {
        test_data: 123,
      },
    ],
    headers: [
      {
        title: 'Funktion',
        value: 'actions',
        sortable: false,
      },
    ],
  }),
  methods: {
    action(item) {
      console.log(item.test_data);
    },
  },
};
</script>

但在Vuetify3 Lab版本中此写法会导致列空白（无错误警告，因该版本暂未正式发布）。

问题解决：调整表头配置 #

在Vuetify 3 Lab版中，表头对象需使用key替代原2.x版本的value字段，修改后的headers配置如下：

headers: [
  {
    title: 'Funktion',
    key: 'actions',
    sortable: false,
  },
],

内容的提问来源于stack exchange，提问作者Robin Uphoff