如何在自定义Vuetify data-table包装组件中实现Item插槽功能

嘿，这个需求我熟！要让你的自定义MyCustomDataTable组件支持原生Vuetify data-table的插槽（比如item.status这种动态作用域插槽），核心就是把外部传入的插槽透传给内部的v-data-table组件，下面分Vue 3和Vue 2两种场景给你拆解实现方法：

1. 自定义组件的核心实现 #

Vue 3 + Vuetify 3 版本 #

在Vue3里，$slots已经包含了所有类型的插槽（普通插槽+作用域插槽），我们可以用一个循环把所有插槽透传进去：

<template>
  <v-data-table
    v-bind="$attrs"
    :items="items"
    :headers="headers"
  >
    <!-- 循环透传所有插槽，自动处理动态插槽名（比如item.status） -->
    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" v-bind="slotProps" />
    </template>
  </v-data-table>
</template>

<script setup>
import { defineProps } from 'vue'

// 接收你需要自定义的核心props
const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  headers: {
    type: Array,
    required: true
  }
})
</script>

Vue 2 + Vuetify 2 版本 #

Vue2里需要区分普通插槽和作用域插槽，分别处理：

<template>
  <v-data-table
    v-bind="$attrs"
    :items="items"
    :headers="headers"
  >
    <!-- 透传普通插槽 -->
    <template v-for="(_, slotName) in $slots" :slot="slotName">
      <slot :name="slotName" />
    </template>
    <!-- 透传作用域插槽（比如item.*这类动态插槽） -->
    <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="slotProps">
      <slot :name="slotName" v-bind="slotProps" />
    </template>
  </v-data-table>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    headers: {
      type: Array,
      required: true
    }
  }
}
</script>

2. 验证你的使用方式 #

现在你就可以完全按照提问里的写法使用组件了，甚至还能支持Vuetify data-table的其他原生插槽：

<MyCustomDataTable :items="items" :headers="headers">
  <!-- 自定义status列的内容 -->
  <template #item.status="{ item }">
    <v-icon v-if="item.status === 0">mdi-check</v-icon>
    <v-icon v-else>mdi-close</v-icon>
  </template>
  <!-- 还可以加其他插槽，比如表头自定义 -->
  <template #header.name="{ header }">
    <span class="text-bold">{{ header.text }}</span>
  </template>
</MyCustomDataTable>

额外小技巧：属性透传 #

代码里的v-bind="$attrs"会自动把你传给MyCustomDataTable的其他属性（比如loading、search、pagination等Vuetify原生属性）传递给内部的v-data-table，这样你的自定义组件就能和原生v-data-table的API无缝兼容，扩展性拉满！

内容的提问来源于stack exchange，提问作者Piotr Słowik