Question

我将v-data-table作为其自己的组件，以使其对我的组件更通用。我想选择向组件提供表格中各项的格式。那可以用一个插槽来完成。但是问题是，提供的插槽具有用于v-data-table的插槽。看例子，这很难解释。

在我的DataTable组件中，我有：

     <v-data-table 
        :headers="tableHeaders" 
        :items="items" 
        :item-key="itemKey"
        :loading="isLoading" 
        v-model="selectedRows" 
        show-select
    >        
        <!-- What do i put here? -->
    </v-data-table>

我使用其他组件中的数据表，如下所示：

    <data-table
        :table-headers="tableHeaders"
        :items="messages"
        :is-loading="isLoading"
        :selected-rows="selectedRows"
        :item-key="'MessageID'"
    >        
        <template v-slot:item.actions="{ item }">
            <v-btn :to="`messages/${item.MessageID}`" icon>
                <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
        </template>
        <template v-slot:item.CreatedDateTime="{ item }">
            <span>{{ format(new Date(item.CreatedDateTime)) }}</span>
        </template>
    </data-table>

我需要将结果呈现为：

     <v-data-table 
        :headers="tableHeaders" 
        :items="items" 
        :item-key="itemKey"
        :loading="isLoading" 
        v-model="selectedRows" 
        show-select
    >        
        <template v-slot:item.actions="{ item }">
            <v-btn :to="`messages/${item.MessageID}`" icon>
                <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
        </template>
        <template v-slot:item.CreatedDateTime="{ item }">
            <span>{{ format(new Date(item.CreatedDateTime)) }}</span>
        </template>
    </v-data-table>

问题是，如何在data-table-tag中提供要呈现在v-data-table-tag中的模板？

Answer 1

您将不得不重新暴露“包装”组件中的插槽：

<v-data-table 
  :headers="tableHeaders" 
  :items="items" 
  :item-key="itemKey"
  :loading="isLoading" 
  v-model="selectedRows" 
  show-select
>        
  <template v-slot:body="bodyParams">
    <slot name="body" v-bind="bodyParams" />
  </template>
  <template v-slot:expanded-item="expandedParams">
    <slot name="expanded-item" v-bind="expandedParams" />
  </template>
  <template v-slot:header="headerParams">
    <slot name="header" v-bind="headerParams" />
  </template>
  <template v-slot:footer="footerParams">
    <slot name="footer" v-bind="footerParams" />
  </template>
  <template v-slot:item="itemParams">
    <slot name="item" v-bind="itemParams" />
  </template>
  <template v-slot:progress="progressParams">
    <slot name="progress" v-bind="progressParams" />
  </template>
  <!-- put here the other slots you are interested in -->
</v-data-table>

Vue组件：在插槽中使用插槽

1 个答案: