我想在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,
},
],
1条答案
按热度按时间1tuwyuhd1#
根据文件,这是可能的。可以这样做-