Vue和Bootstrap Vue-动态使用插槽 [英] Vue and Bootstrap Vue - dynamically use slots

问题描述

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

I'm trying to make in a bootstrap-vue table a slot to render any boolean value with a custom component.

所以我有一个简单的桌子

So I have a simple table

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

</b-table>

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

Now if i want to render a single column in a particular way i have to use a slot

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

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

And it works, because I know that active is a boolean.

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

I would like to generalize this behavior but i cannot use v-for in templates and cannot use v-slot:cell(active) if not on template... The idea was to create an array with all my boolean fields and iterate on it... but it does not work..

类似这样的东西

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

推荐答案

因为Vue支持动态广告位名称，您可以使用变量使用 v-bind:[attributeName]="value" 语法.

Because Vue supports Dynamic Slot Names, you can use variables to set the slot names using the v-bind:[attributeName]="value" syntax.

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

This way you could do something like:

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

但是由于动态，因此无法使用引号参数表达式约束.因此，您必须创建一个辅助方法来进行串联.所以:

But using the quotes there is not possible due to the dynamic argument expression constraints. So you'll have to create a helper method to do that concatenation. So:

<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)，但是我留下了名称gomycell，因此在此示例中它更加清晰方法的名称是什么，什么不是.

Naturally, you could just name the method gomycell as cell and use it like v-slot:[cell(b)]="data" (notice the []s), but I left the name gomycell just so in this texample it is clearer what is the name of the method and what is not.

这是一个小示例，展示了动态广告位名称用法，它不是b-table，但我认为它足以表明可能:

Here's a small demo showcasing the dynamic slot names usage, it's not b-table but I think it is good enough to show it is possible:

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>

这篇关于Vue和Bootstrap Vue-动态使用插槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！