是否可以使用动态作用域槽来覆盖内部的列值<v-data-table>？

Question

我正在尝试创建一个可重用的表组件，该组件利用Vuetify的v-data-table组件来对常见方面进行分组，如搜索栏、表操作(刷新、创建等(和我所有表都将具有的其他功能。然而，在表组件中实现动态的、作用域的槽以考虑自定义列时，我遇到了一些问题。想想动作、格式化的ISO字符串等列。

下面是我目前正在尝试的一个简化示例。在本例中，我将数组customColumns作为道具传递给CustomDataTable.vue。CCD_ 3具有一个具有两个性质的元素。slotName属性指定要在父组件中引用的插槽的名称。itemValue属性指定CustomDataTable.vue应覆盖并替换为作用域槽的标头值。然后在父组件中使用作用域槽，以正确设置"创建时间"列中的日期格式。

正在实现表组件的父组件：

<template>
<custom-data-table
:items="items"
:headers="headers"
:customColumns="customColumns"
>
<template v-slot:custom-column="slotProps">
<span>{{ formatDate(slotProps.item.createdAt) }}</span>
</template>
</custom-data-table>
</template>
<script>
import CustomDataTableVue from '@/components/table/CustomDataTable.vue'
export default {
data: () => ({
items: [
{
id: 0,
createdAt: new Date().toISOString(),
...
},
...
],
headers: [
{
text: 'Created At',
value: 'createdAt',
sortable: true
},
...
],
customColumns: [
{
slotName: 'custom-column',
itemValue: 'createdAt' 
}
]
})
}
</script>

自定义数据表.vue

<template>
<v-data-table
:items="items"
:headers="headers"
>
<template v-for="column in customColumns" v-slot:item[column.itemValue]="{ item }">
<slot :name="column.slotName" :item="item"/>
</template>
</v-data-table>
</template>
<script>
export default {
name: 'custom-data-table',
props: {
items: {
type: Array,
required: true
},
headers: {
type: Array,
required: true
},
customColumns: {
type: Array
}
}
}
</script>

有办法做到这一点吗？该示例不覆盖列值，只显示未格式化的createdAtISO字符串。我相信问题可能来自于我如何在CustomDataTable.vue中分配模板的插槽，但我确信你还能如何动态指定模板的插槽。有什么想法吗？

Answer 1

我认为动态插槽的语法应该是：

<template 
v-for="column in customColumns" 
v-slot:[`item.${column.itemValue}`]="{ item }"
>
<slot :name="column.slotName" :item="item"/>
</template>