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

Question

您好，感谢您阅读我的问题！我正在使用 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 属性被设置为“overalls”，但我希望如果表的 options.sortBy 属性显示在列上的图标是“工作服”，如果是“鞋子”也会显示

请帮助并非常感谢！

Answer 1

要重用多个标头/列的槽内容，请使用 Vue 的动态槽名称功能 +v-for

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

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