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

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”，但我希望列上的图标显示如果 table 的 options.sortBy 属性是“overalls”，则显示出来，如果是“shoes”，也会显示出来

请帮忙，非常感谢！

Answer 1

要为多个标题/列重用插槽内容，请使用 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>