Vuetify实验室:在VDataTable中为图标使用插槽

icnyk63a  于 2023-01-14  发布在  Vue.js
关注(0)|答案(1)|浏览(218)

我想在VDataTable的列中呈现一个图标。有人知道在Vuetify3的最新实验室版本中是否已经可以为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>

这将导致一个空列(没有错误和警告,因为它还没有准备好生产)。

**EDIT:**刚刚解决,现在header对象中是key而不是value。因此header应该是:

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

1tuwyuhd1#

根据文件,这是可能的。可以这样做-

<template v-slot:item.actions="{ item }">
  <v-icon
    icon="$magnifier"
    style="color: #0692bc"
    class="inline cursor-pointer mr-4"
    @click="action(item)"
  />
</template>

相关问题