Vue.js 如何在vuejs中针对表的不同元素在子组件中以不同方式显示数据？

我想在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>

{{row.Details显示？'Hide'：'Show'}详细信息
年龄：
{{items[0]。公司标识符}
处于活动状态：
积极的
隐藏细节

---

对于b表，我使用下面声明为prop的items字段显示数据，该字段来自父表。但是在下面，我无法显示b-card中的数据。

我认为

b-card

show中的数据可以用

row.item.companyIdentifier

呈现。 相反<代码>项目[0]。公司标识将始终与第一个项目相同

<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>

年龄：
{{row.items.companyIdentifier}
处于活动状态：
积极的
隐藏细节

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

你也可以分享

js

代码吗？卡和表似乎位于两个不同的模板标记下，因此如果它们是不同子组件的一部分，那么将数据传递到b-table不会反映在b-card上。