vue.js 如何使 v-slot 模板动态化？

如何解决vue.js 如何使 v-slot 模板动态化？

您好，感谢您阅读我的问题！我正在使用 Vue.js、Vuetify 和 v-data-table，并且我正在努力使我的 v-slot 使用两个不同的字符串作为标题的名称。

<template>
  <v-container fluid>
    <v-data-table
      :options="data"
      :headers="headers"
      :items="data
      :server-items-length="40"
      :loading="loading"
      :multi-sort="true"
      @update:options="updateThePage"
    >
      <template v-slot:[`header.overalls`]="{ header }" class="flight-date-header">
        <overallDatePicker
          :options="data"
        />
        {{ header.name }}
      </template>

      <template v-slot:[`item.name`]="{ item }">
        <p class="company-name">
          {{ item.companyName }}
        </p>
      </template>

      <template v-slot:[`item.price`]="{ item }">
          <p> {{ item.price }} </p>
      </template>

      <template v-slot:[`item.flightDate`]="{ item }">
        <p class="style">
          {{ item.startDate }}
        </p>
      </template>

    </v-data-table>
  </v-container>
</template>

我像下面这样存储我的标题

headers: [
      { text: 'Campaign Name',value: 'overalls' },],

理想情况下，我想要这个插槽的名称

<template v-slot:[`header.overalls`]="{ header }" class="flight-date-header">
       <overallDatePicker
         :options="data"
       />
     </template>

使用两种不同的数据选项。现在标题的名称是工作服，但我希望标题的名称['header.overalls'] 像 ['header.('overalls' || 'shoes')] ,

原因我现在这样做的原因是当我单击标题时，表的 options.sortBy 属性被设置为“整体”，但我希望列上的图标显示如果 table 的 options.sortBy 属性是“overalls”，则向上显示，如果它是“shoes”也显示

请帮助并非常感谢您！

解决方法

要为多个标题/列重用插槽内容，请使用 Vue 的 dynamic slots names 功能 + v-for

data() {
  return {
    specialHeaders: ['overalls','shoes'],}
}

<template v-for="column in specialHeaders" v-slot:[`header.${column}`]="{ header }">
  Special:{{header.text}}
</template>