2

您好，感谢您阅读我的问题！我正在使用 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 属性是“工作服”，如果是“鞋子”也会出现

请帮忙，非常感谢！

4

1 回答 1

0

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

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

<template v-for="column in specialHeaders" v-slot:[`header.${column}`]="{ header }">
  Special:{{header.text}}
</template>
于 2021-04-12T14:49:33.080 回答