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

Posted 2023-02-23

【中文标题】在 Bootstrap Vue <b-table> 中动态创建模板槽

【英文标题】：Dynamically create template slots in Bootstrap Vue <b-table>

【发布时间】：2021-05-27 08:10:29

【问题描述】：

我正在尝试将 html 添加到 Vue 表的标题中。知道该领域的关键，我可以做这样的事情：

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

但是，我的表将有未知数量的列，每个列都有未知的启动键（通过 axios 拉入）。在我从服务器检索所有密钥后，有没有办法动态设置 my_key？

【参考方案1】：

您可以使用dynamic slot names 来定位带有变量的标题槽。假设您上面的伪代码示例中的my_key 是一个变量的名称，那么您的示例可以用template literal 重写：

<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']
)