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

Question

我正在尝试在 Vue table 中将 HTML 添加到 headers。知道字段的键我可以做这样的事情：

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

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

Answer 1

您可以使用 dynamic slot names to target the header slot with a variable. Assuming my_key in your pseudo-code example above is the name of a variable, then your example could be rewritten with a template literal:

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

然后，您可以使用 table 的 fields 数组或任何键数组，使用 v-for 来定位所有 table header 插槽：

<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 的替代解决方案，基于 depreciated syntax 可以是这样的：

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

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

Dynamically create template slots in Bootstrap Vue <b-table>

vue.js

vue-component

vuejs2

bootstrap-vue

vue-slot