vue.js - 在 Bootstrap Vue 中动态创建模板槽

Question

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

<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>