我有一个名为“列表”的组件,其中包含一个vue boostrap表:
<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>
我正在从父组件“订单”传递表格项目。我还想将行模板传递给vue boostrap b表组件。
不幸的是,我无法使用插槽(它可能是模板中的模板)来工作
<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>
答案 0 :(得分:7)
您只需更改IVO的答案并使您的List组件通用即可。
这是一种可行的方法:
列出组件模板:
<template>
<b-table striped hover :items="items">
<template :slot="slot.field" slot-scope="row" v-for="slot in slots">
<slot :name="slot.name" :tbl="row"></slot>
</template>
</b-table>
</template>
列出组件道具:
props: {
items: {
type: Array
},
slots: {
type: Array
}
},
然后,在任何父组件中(使用List),您都可以定义templates
数据属性,并带有要传递给List组件的模板指令数组。在示例中,我使用了一个对象数组来传递动态插槽名称和表数据字段。
父组件templates
的数据属性:
data() {
return {
...
templates: [
{
name: "templateName",
field: "dataFieldName"
},
...
]
};
},
父组件模板,列表用法:
<list :items="items" :slots="templates">
<template slot="customSlotName" slot-scope="data">
// Custom template here...
</template>
</list>
这会将所有自定义模板逻辑保留在父组件中,例如。 Order.vue,而不是List.vue。
这是更新的代码和框: https://codesandbox.io/s/244p9rx10n
答案 1 :(得分:3)
您尝试过那样吗?您可以从表格的插槽中获取范围,然后在嵌套插槽中提供此范围:
<template>
<div>
<b-table :items="items">
<template slot-scope="row">
<slot name="tableTemplates" :tbl-props="row"></slot>
</template>
</b-table>
</div>
</template>