How to render a custom component in <b-table> Bootstrap Vue? (Vue.js 2)

Question

How can I show a custom component- BaseButton.vue in the rows of the table, if table component and button are common components?

I made the component BaseTable.vue. I use this component for all tables.

<template>
  <b-table :fields="fields" :items="items"></b-table>
</template>

<script>
export default {
      props: {
        fields:{
          type: Array,
          require: true
        },
        items:{
          type: Array,
          require: true
        },
}

fields - object in a parent component. items - object from API.

Parent component (base button doesn't appear in table on page):

<template>
  <base-table :fields="fields" :items="items">
    <template #cell(actions)>
      <base-button></base-button>
    </template>
  <base-table>
</template>

<script>
  import BaseButton from '...';

export default {
  data() {
    return {
      fields: [
        { key: 'Caption', label: 'Name' },
        { key: 'PreviousMonthCounter', label: 'Prev. month' },
        { key: 'CurrentMonthCounter', label: 'Curr. month' },
        { key: 'actions', label: 'Action' }
      ],
      items: []
    }
  },

  components: {
    BaseButton
  }
}

And now I need to render BaseButton.vue in the last column of the table and I can't to make it - table has only text fields from items.

Does this answer your question? How to pass cell templates to a component with b-table? — Michal Levý
– Michal Levý, Commented Jul 25, 2021 at 5:18
yes, like that, but i think my variant is better. From bootstrap community i found out :) — Алексей
– Алексей, Commented Jul 26, 2021 at 2:03
I respectfully disagree. Question is clear duplicate. Also other question is much better formulated. Answer is badly formatted, the code is longer, contains no further explanation and uses slot and slot-scope which is deprecated — Michal Levý
– Michal Levý, Commented Jul 26, 2021 at 9:08
Hm... may be you are right... need to look better, because my code is working but.... dont want to rewrite code but i could to write better ) — Алексей
– Алексей, Commented Jul 27, 2021 at 10:13

Алексей · Accepted Answer · 2021-07-25 15:23:16Z

1

Need to create a child component (BaseTable):

<template>
<b-table :items="items" :fields="fields">
  <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot" />
  <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
    <slot :name="slot" v-bind="scope"></slot>
  </template>
</b-table>
</template>

And use it in the parent component like , but must be replaced by your component name.

For example:

<base-table :fields="fields" :items="items">
<template #cell(nameOfTheField)="{item}">
  {{ item.key }}
</template>
<template #cell(nameOfTheField)>
  <base-button></base-button>
</template>

answered Jul 25, 2021 at 15:23

Алексей

215 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render a custom component in <b-table> Bootstrap Vue? (Vue.js 2)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related