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

【问题标题】：How to display data in child component differently for different elements of a table in vuejs?如何在 vuejs 中为表格的不同元素以不同方式显示子组件中的数据？
【发布时间】：2019-10-05 19:39:26
【问题描述】：

我想在 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-card 内的数据。

【问题讨论】：

您也可以分享js 代码吗？看起来卡片和表格在两个不同的模板标签下，所以如果它们是不同子组件的一部分，那么将数据传递给 b-table 不会反映在 b-card 上。

标签： vue.js vuejs2 vue-props

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为b-card 中的数据显示用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>

【讨论】：