演示：

Question

我正在尝试在bootstrap-vue表中创建一个插槽，以使用自定义组件呈现任何布尔值。

所以我有一个简单的桌子

<b-table :items="items" :fields="columns" >

</b-table>

现在，如果我想以一种特殊的方式呈现一列，我必须使用一个插槽

<template v-slot:cell(active)="data" >
    <my-component :item="data.item" />
</template>

它有效，因为我知道 active 是布尔值。

我想概括这种行为，但是我不能在模板中使用 v-for ，也不能使用 v-slot:cell(active) < / em> （如果不在模板上）...的想法是用我的所有布尔字段创建一个数组并对其进行迭代...但是它不起作用。

类似这样的东西

<template v-slot:cell(b)="data" v-for="b in booleanFields"> <my-component :item="data.item[b]" /> </template>

Answer 1

由于Vue支持Dynamic Slot Names，因此您可以使用变量v-bind:[attributeName]="value"来设置插槽名称。

这样，您可以执行以下操作：

<template v-slot:['cell(' + b + ')']="data" v-for="b in booleanFields">

但是由于dynamic argument expression constraints，因此无法使用引号。因此，您必须创建一个辅助方法来进行串联。所以：

<template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">

加

methods: {
  gomycell(key) {
    return `cell(${key})`; // simple string interpolation
  }

自然地，您可以将方法gomycell命名为cell并像v-slot:[cell(b)]="data"一样使用它（注意[] s），但是我留下了名称{{1 }}就是这样，在这个示例中，方法的名称更清楚，什么不是。

演示：

这是一个展示dynamic slot names用法的小演示，不是gomycell，但我认为它足以表明可能：

b-table

Vue.component('my-table', {
  template: '#my-table',
})

new Vue({
  el: '#app',
  data: {
    booleanFields: [true, false]
  },
  methods: {
    gomycell(key) {
      return `cell(${key})`;
    }
  }
})

Vue和Bootstrap Vue-动态使用插槽

1 个答案:

演示：