I am working on a component named "List" that includes a Vue Boostrap table:
<template>
<div>
<b-table :items="items">
<!--<template slot="createdAt" slot-scope="row"> usually vue boostrap table row templates live here-->
<!--{{row.item.createdAt|dateFormatter}}-->
<!--</template>-->
<slot name="tableTemplates"></slot> <!-- but i want to pass the templates from my parent template -->
</b-table>
</div>
</template>
For this setup, I am passing the table items from another Component called "Orders". Additionally, I need to pass row templates to the b-table component within Vue Boostrap.
However, I am facing challenges with implementing this using slots as it involves a template inside another template:
<template>
<div>
<list :items="items">
<template slot="tableTemplates">
<!--templates inside templates do not work-->
<template slot="id" slot-scope="row">
<span v-b-tooltip.hover :title="row.item.id">{{row.item.id|uuidFormatter}}</span>
</template>
<template slot="createdAt" slot-scope="row">
{{row.item.createdAt|dateFormatter}}
</template>
<template slot="customer" slot-scope="row">
{{row.item.customer}}
</template>
</template>
</list>
</div>
</template>