小编ben*_*n97的帖子

您好，感谢您阅读我的问题！我正在使用 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 …