Vue.js передает слот в обернутый компонент Bootstrap-Vue Table - PullRequest
Новая
       38

Vue.js передает слот в обернутый компонент Bootstrap-Vue Table

0 голосов
/ 17 октября 2019

Я пытаюсь создать оболочку для компонента таблицы bootstrap-vue. Этот компонент использует слоты для определения шаблонов ячеек, например: 

<b-table :items="itemsProvider" v-bind="options">
    <template v-slot:cell(id)="data">
        ///...here goes the template for the cell's of itens key "id"
    </template>
</b-table>

Итак, созданная мной оболочка выглядит так: 

    <div>
        <b-table :items="itemsProvider" v-bind="options" >
            <slot></slot>
        </b-table>
        <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
                 />
    </div>

И я хочу назвать этот компонент следующим образомthis: 

<TableAjax :options="options">
    <template v-slot:cell(id)="data">
        ///...here goes the template for the cell's of itens key "id"                    
    </template>
</TableAjax>

Но, поскольку слоты, необходимые для компонента b-таблицы, названы, мне трудно передать его из оболочки.

Как я могу это сделать?

1 Ответ

1 голос
/ 17 октября 2019

Передача слотов дочернему компоненту может быть выполнена следующим образом: 

<template>
  <div>
    <b-table :items="itemsProvider" v-bind="options" >
      <template v-slot:cell(id)="data">
         <slot name="cell(id)" v-bind="data"></slot>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    />
  </div>
</template>

Но так как вы можете не знать имена слотов заранее, вам нужно будет сделать что-то похожее на следующее: 

<template>
  <div>
    <b-table :items="itemsProvider" v-bind="options" >
      <template v-for="slotName in Object.keys($scopedSlots)" v-slot:[slotName]="slotScope">
        <slot :name="slotName" v-bind="slotScope"></slot>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    />
  </div>
</template>
...