有没有办法将插槽与vuetify数据表组件一起使用？

如何解决有没有办法将插槽与vuetify数据表组件一起使用？

这是我的组件（我们称之为BaseTable）：

  <v-card>
    <v-card-title>
      {{ title }}
      <v-spacer></v-spacer>
      <v-text-field
        :value="value"
        @input="$emit('input',$event)"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :search="value"
      :headers="headers"
      :items="items"
      :loading="loading"
      :loading-text="loadingText"
    >
      <slot></slot> <!--Will pass something here -->
    </v-data-table>
  </v-card>
</template>

然后我想通过“操作”列中的按钮重用这样的BaseTable：

 <BaseTable
      :headers="headers"
      :items="items"
      :loading="loading"
      loadingText="Getting items... Please wait"
      title="Transfer Request Processing"
      v-model.lazy="search"
    >
      <template v-slot:item.actions="{ item }">
        <v-btn block color="warning" outlined @click="delete(item)">
          <v-icon left class="mr-2">mdi-icon</v-icon>DELETE
        </v-btn>
      </template>
    </BaseTable>

数据以正确的标题显示，但“ DELETE”按钮没有显示。我尝试在组件本身上使用模板（效果很好），但我不希望这样。非常感谢您的帮助。

解决方法

是的，可以pass slot content to a grandchild。

它涉及在后代（您的BaseTable）中使用命名的slot元素，在较高组件中使用带有v-slot的模板元素。像这样：

// BaseTable
...
    <slot name="actions :props></slot>
...

// Parent
<BaseTable>
    <template v-slot:actions="props"></template>
</BaseTable>

,

我知道了。我必须使用有作用域的插槽。

我要做的就是将以下内容放在子组件数据表中：

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

然后在父级中：

<template v-slot:item.actions="{ item }">
   <v-btn block color="warning" outlined @click="delete(item)">
      <v-icon left class="mr-2">mdi-icon</v-icon>DELETE
   </v-btn>
</template>

在阅读了下面的两篇文章之后，我开始工作了，但是鉴于我是Vue.js的新手，我仍然不完全了解其背后的科学知识

https://vuejsdevelopers.com/2017/10/02/vue-js-scoped-slots/

和

https://css-tricks.com/using-scoped-slots-in-vue-js-to-abstract-functionality/

（对我有帮助的两篇文章）。