如何扩展 Vuetify 中 v-data-table 组件中的插槽？

Question

您好，我正在尝试扩展默认的 v-data-table 组件以Vuetify避免代码冗余。我的组件很少v-data-table。它的工作原理相同，但表头可能不同。我正在使用v-slots，但如何扩展动态插槽Vuetify？

当我必须将自定义 html 添加到表中的一列（例如action）时，我正在使用：

<v-data-table
   :headers="questionTableHeaders"
   :items="questions.fetchedData"
   class="elevation-1"
   hide-default-footer
   :page.sync="questions.pagination.page"
   :items-per-page="questions.pagination.itemsPerPage"
   :loading="loadingData"
   loading-text="Loading..."
   no-data-text="No data.">

   <template v-slot:item.action="{ item }">
      <v-icon
      small
      class="mr-2"
      title="title"
      @click="clickOnTheItem(item)">
      fas fa-plus
      </v-icon>
   </template>

</v-data-table>

但有时表没有列操作。如何在组件dataTable扩展默认v-data-table组件中准备动态插槽，以确保传递到组件的每个标头都有一个可以在父组件中使用的插槽？

如果我有标题：

[
   {text: "text1", value: "name"},
   {text: "text2", value: "hash"}
]

我可以访问老虎机item.name并且item.hash？

<dataTable :url="examApiUrl" :headers="examTableHeaders">
   <template v-slot:item.name="{ item }"></template>
   <template v-slot:item.hash="{ item }"></template>
</dataTable>

但正如我之前所写，标题可以不同。如何在组件中准备插槽dataTable？

Answer 1

尝试一下

<v-data-table
   :headers="questionTableHeaders"
   :items="questions.fetchedData"
   class="elevation-1"
   hide-default-footer
   :page.sync="questions.pagination.page"
   :items-per-page="questions.pagination.itemsPerPage"
   :loading="loadingData"
   loading-text="Loading..."
   no-data-text="No data.">

   <template v-slot:item.action="{ item }">
      <v-icon
      small
      class="mr-2"
      title="title"
      @click="clickOnTheItem(item)">
      fas fa-plus
      </v-icon>
   </template>
    <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="item">
      <slot :name="name" v-bind="item"></slot>
    </template>
</v-data-table>