Как добавить пользовательские элементы в таблицу b-table?

Question

[Игорь]

Как добавить пользовательские элементы в таблицу b-table?
b-table

Если бы данные были статичные, то засунуть кнопку не составило бы труда.
Данные загружаются в таблицу по API.

В b-table поддержка Formatter callback.

Но маловероятно что это мне поможет.

Мне нужно добавить пару кнопок в каждую строку и повесить обработчики событий.

Answer 1

[Игорь]

В общем есть такая штука:

Называется "Custom data rendering"

Там есть инструкция, как это делается.

Выдержка из инструкции

Scoped slots give you greater control over how the record data appears. If you want to add an extra field which does not exist in the records, just add it to the fields array, And then reference the field(s) in the scoped slot(s).

Ну что-то типа вот этого

<b-table
                        no-local-sorting hover show-empty
                        select-mode="multi"
                        selectedVariant="success"
                        :items="this.products.items"
                        :fields="this.products.fields"
                        @row-selected="rowSelected"
                        @filtered="filtered"

                >

                    <template slot="mybutton" slot-scope="data">
                        <b-button variant="outline-primary">Edit</b-button>
                    </template>

                    <template slot="empty" slot-scope="scope">
                        <div class="text-center">
                            <h5>Пусто</h5>
                        </div>
                    </template>
                </b-table>

Comments

[Игорь]

Ну и вообще, можно много вопросов порешать с помощью слотов

<template slot="status" slot-scope="data">
      <b-badge variant="success" v-if="data.item.status">Выпущен</b-badge>
      <b-badge variant="danger" v-if="!data.item.status">Завершён</b-badge>
</template>