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

Question

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

这是我目前正在尝试的一个简化示例。在示例中，我将数组customColumns作为 prop 传递给 CustomDataTable.vue。customColumns具有一个具有两个属性的元素。该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>

有办法实现这一点吗？该示例不会覆盖列值，仅显示createdAt未格式化的 ISO 字符串。我相信问题可能来自于我如何在 CustomDataTable.vue 中分配模板的插槽，但我确信您还可以如何动态指定模板的插槽。有任何想法吗？

Answer 1

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

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