![](/img/trans.png)
[英]How to use bootstrap 4 in vue.js 2 without bootstrap-vue?
[英]Vue.js pass slot to wrapped Bootstrap-Vue Table component
我正在嘗試為 bootstrap-vue Table 組件創建一個包裝器。 該組件使用插槽來定義單元格模板,如下所示:
<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>
我想這樣稱呼這個組件:
<TableAjax :options="options">
<template v-slot:cell(id)="data">
///...here goes the template for the cell's of itens key "id"
</template>
</TableAjax>
但是,由於 b-table 組件上所需的插槽已命名,我很難從包裝器中傳遞它。
我怎樣才能做到這一點?
將插槽傳遞給子組件可以這樣完成:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.