Question

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

当我必须向表中的某一列（例如 action ）添加自定义html时：

<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>

但是有时候表没有列 action 。如何在组件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>

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

1 个答案: