vue.js - 如何在 vuejs 中为表格的不同元素以不同方式显示子组件中的数据？

Question

我想在 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 表，我使用 item 字段显示数据，该字段在下面声明为 prop 并且来自父级。但在下面，我无法显示 b 卡内的数据。

Answer 1

我是在引导 vue 表中的作用域插槽的帮助下完成的。

Answer 2

我认为b-cardshow 里面的数据是用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>