时间戳

首页 > 解决方案 > 在 Bootstrap Vue 中动态创建模板槽

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

问题描述

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

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

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

标签： vue.jsvuejs2vue-componentbootstrap-vuevue-slot

解决方案

您可以使用动态插槽名称来定位带有变量的标头插槽。假设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']
})

推荐阅读