vue-bootstrap有一个表,它的列可以通过模板设置。但事实是这个模板本身的数据是从JSON中获取的,所以我不知道如何制作一个将返回值的槽?
示例表模板:
<b-table
:items="data"
:fields="fields"
class="mb-0"
>
<template #cell(partners_total)="data">
<span class="text-nowrap" v-if="data.item.hash">{{ data.item.hash }}</span>
</template>
<template #cell(income)="data">
<span class="text-nowrap" v-if="data.item.hash">{{ data.item.hash }} QDT</span>
</template>
</b-table>
可以看到,#cell(income)="data"据我所知,它是一个槽,但它返回内部的值:items="data"
它是如何实现的我不能理解?
数据举例:
transactions: [
{
id: "hash",
hash: "1643898128736718972368179623a6e6b"
},
{
id: "income",
hash: "1643898128736718972368179623a6e6b"
},
{
id: "partners_total",
hash: "1643898128736718972368179623a6e6b"
}
],
绑定要发送到插槽的数据
父组件
<div>
<v-slot :data="data" />
</div>
在使用组件时访问
子组件
<v-slot="{data}">
...
</slot>