Vue和Bootstrap Vue - 动态使用插槽

Question

Vue和Bootstrap Vue - 动态使用插槽

12

我试图在 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)...我的想法是创建一个包含所有布尔字段的数组并对其进行迭代... 但是它不起作用...

就像这样:

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

- MarioC

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acdcjunior · Accepted Answer

由于Vue支持动态插槽名称, 您可以使用变量来设置插槽名称，使用v-bind:[attributeName]="value"语法。

这样，您可以做如下操作：

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

但是由于动态参数表达式约束, 在那里使用引号是不可能的。因此，你需要创建一个帮助方法来进行连接。所以：

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

加号

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

自然地，你可以把方法命名为cell并像这样使用v-slot:[cell(b)]="data"（注意[]），但我保留了gomycell的名称，以便在这个例子中更清楚哪些是方法的名称，哪些不是。{{注意，此处是代码示例}}

演示:

这是一个小演示，展示了动态插槽名称的使用方式，虽然不是b-table，但我认为它足以表明这是可能的:

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

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

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-table>
    <template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">
      <h3>who? {{ data.is }}</h3>
    </template>
  </my-table>
</div>

<template id="my-table">
  <div>
    <div style="color:green"><slot name="cell(true)" v-bind="{is: 'true!'}"></slot></div>
    <div style="color:red"><slot name="cell(false)" v-bind="{is: 'false!'}"></slot></div>
  </div>
</template>