在 Bootstrap Vue <b-table>中动态创建模板槽

Question

我试图在Vue表中添加HTML标题。知道了字段的键，我可以这样做:

<template v-slot:head(my_key)="data">
<span v-html="data.field.label" />
</template>

然而，我的表将有未知数量的列，每个列都有未知的键开始(通过axios拉入)。在我从服务器检索所有密钥后，是否有一种方法可以动态设置my_key?

Answer 1

您可以使用动态槽名来使用变量来定位头槽。假设上面伪代码示例中的my_key是一个变量的名称，那么您的示例可以用模板字面量重写:

<template v-slot:[`head(${my_key})`]="data">

然后，您可以使用表的fields数组或任何键数组，并使用v-for来瞄准所有表头槽:

<template v-for="field in fields" v-slot:[`head(${field})`]="data">
<span v-html="data.field.label" />
</template>

data: () => ({
fields: ['a', 'b', 'c']
})

Answer 2

只是为了完成和那些可能正在看旧代码的人(也许和我一样在语法上挣扎)，一个替代@Dan的解决方案，基于贬值的语法可能是这样的:

<template
v-for="{key} in fields"
:slot="`HEAD_${key}`"
slot-scope="{label}"  
>
<span v-html="label" />
</template>