Vue - Как получить доступ к элементам из B-таблицы - PullRequest
Новая
       6

Vue - Как получить доступ к элементам из B-таблицы

0 голосов
/ 18 февраля 2020

Я использую "b-table" с ": поля" и ": items" , я уже знаю, как настроить специфику c поля с "v-slot: ячейка (имя ключа)" . Но знаете, я хочу получить значение каждого элемента в этом столбце и отображать его по-разному в зависимости от его значения. Есть ли способ сделать это?

Моя таблица выглядит следующим образом 

        <b-table
                striped hover
                responsive
                :fields="shotlist_tab.fields"
                :items="shotlist_tab.shots">

            <template v-slot:cell(frame)>
                <!-- ACCESS ELEMENT -->
                <div v-if="???">
                    <font-awesome-icon class="icon" :icon="['fas', 'image']"/>
                </div>
                <div v-else>
                    <img src="../../assets/logo.png" height="50" width="50" alt="frame"/>
                </div>

Я уже создал стандартную таблицу с v-for="(object, index) in objects", где я могу получить доступ к каждой информации с помощью object.element I хочу повторить это с помощью b-таблицы.

1 Ответ

2 голосов
/ 18 февраля 2020

Слоты ограничены, что означает, что вам передано значение ячейки вместе с дополнительной информацией (т. Е. Полными данными строки, определением поля для ячейки и т. Д. c). 

<template v-slot:cell(frame)="scope">
  <!-- You may need to adjust the condition/check for your situation -->
  <div v-if="scope.value === null">
    <font-awesome-icon class="icon" :icon="['fas', 'image']"/>
  </div>
  <div v-else>
    <img src="../../assets/logo.png" height="50" width="50" alt="frame"/>
  </div>
</template>

См. в документы для пользовательского рендеринга данных: https://bootstrap-vue.js.org/docs/components/table#custom -дата рендеринга

...