如何使用Vuetify V-Data-table项目插槽？

Question

<!-- DataTable.vue -->
<template>
  <v-data-table
    class="elevation-1"
    v-bind="$attrs"
    v-on="$listeners"
    dense
  ></v-data-table>
</template>

如您所见，我创建了一个包装＆lt; v-data-table＆gt;的组件。我想知道，为什么如果使用它，我无法访问项目插槽？

<!-- PeopleView.vue -->
<template>
  <v-container>
    <DataTable
      :headers="headers"
      :items="people"
    >
      <template #item.fullName="{ value }">
        <b>{{ value }}</b>
      </template>
    </DataTable>
  </v-container>
</template>

Answer 1

在内部添加插槽 v-data-table可能可能会解决您的问题。

  <v-data-table
    :class="{ clickable }"
    :headers="reshapedHeaders"
    :items="items"
    :loading="loading"
    :sort-by="sortBy"
    sort-desc
    :item-key="itemKey"
    :expanded.sync="expanded"
    :show-expand="showExpand"
    :hide-default-footer="disablePagination"
    :disable-pagination="disablePagination"
    @click:row="handleClickRow"
    @dblclick:row.stop="handleDblclickRow"
 >
            <!-- Pass on all named slots -->
            <slot
                v-for="slot in Object.keys($slots)"
                :name="slot"
                :slot="slot"
            />

            <!-- Pass on all scoped slots -->
            <template
                v-for="slot in Object.keys($scopedSlots)"
                :slot="slot"
                slot-scope="scope"
            >
                <slot :name="slot" v-bind="scope" />
            </template>
   </v-data-table>

Answer 2

要使用项目插槽，您必须“覆盖”插槽和示例插槽。

<!-- DataTable.vue -->
<template>
  <v-data-table
    ...
  >
    <template v-for="(_, name) in $slots">
      <template :slot="name">
        <slot :name="name"></slot>
      </template>
    </template>

    <template
      v-for="(_, name) in $scopedSlots"
      #[name]="data"
    >
      <slot
        :name="name"
        v-bind="data"
      ></slot>
    </template>
  </v-data-table>
</template>