Как по-разному отображать данные в дочернем компоненте для разных элементов таблицы в vuejs? - PullRequest
Новая
       26

Как по-разному отображать данные в дочернем компоненте для разных элементов таблицы в vuejs?

0 голосов
/ 05 октября 2019

Я хочу отображать различные данные каждого элемента в моей таблице в vuejs

Я использовал реквизиты и могу отображать данные таблицы, созданные с помощью тега b-table. Но я не могу отображать данные по-разному для каждого элемента в таблице. Некоторый код может быть для меня простым, чтобы вы поняли мою проблему 

<div class="card-body" style="overflow-y:scroll;">
                <loader v-if="loading" />
                <b-table v-else
                         @row-selected="onRowClick"
                         bordered
                         responsive
                         stacked="md"
                         :items="items"
                         :fields="fields"
                         :current-page="currentPage"
                         :per-page="perPage"
                         :filter="filter"
                         @filtered="onFiltered"
                         selectable
                         :select-mode="'single'">
                    <template v-slot:cell(show_details)="row">
                        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
                            {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
                        </b-button>

                    </template>

                    <template v-slot:row-details="row">
                        <b-card>
                            <b-row class="mb-2">
                                <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
                                <b-col>{{items[0].companyIdentifier}}</b-col>
                            </b-row>

                            <b-row class="mb-2">
                                <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
                                <b-col>active</b-col>
                            </b-row>

                            <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
                        </b-card>
                    </template>
                </b-table>

            </div>

Для таблицы b я отображаю данные, используя поле items, которое объявлено ниже в качестве подпорки и исходит от родителя. Но ниже я не могу показать данные внутри b-карты.

Ответы [ 2 ]

1 голос
/ 07 октября 2019

Я сделал это с помощью доступных слотов в таблице начальной загрузки.

0 голосов
/ 06 октября 2019

Я думаю, что данные внутри b-card show будут отображаться с row.item.companyIdentifier. вместо. items[0].companyIdentifier всегда будет таким же, как первый элемент. 

<template v-slot:row-details="row">
  <b-card>
      <b-row class="mb-2">
          <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
          <b-col>{{row.items.companyIdentifier}}</b-col>
      </b-row>

      <b-row class="mb-2">
          <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
          <b-col>active</b-col>
      </b-row>

      <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
  </b-card>
</template>
...