Bootstrap-vue b-table 将@row-clicked 数据传递到 b-card 外部 table 或模板？

Question

正在使用 Boostrap-Vue b-table，它使用 @row-clicked 在卡片中显示相关数据，卡片向下扩展到 table 中单击的行下方。这非常有效，但现在客户询问该数据是否可以出现在 table 的一侧，就像侧边栏 b-card 中的 a 一样。

我试过将 <template #row-details="row">...</template> 从 b-table 移到 b-card 中，如下所示：

  <b-table :items="dataDevices" @row-clicked="onRowClicked">
    <!-- normally the template is in here and works as expected  -->
  </b-table> 
  <template #row-details="row">
    <b-card>{{ row.item.serno }}</b-card>
  </template>

但这不起作用。我试过将模板语法更改为 <template slot="row-details" slot-scope="row"> 但无济于事。

我想我的 Google-Fu 很不错，但到目前为止我似乎找不到 任何人 这样尝试过。

我知道@row-clicked 包含一个指向行数据的指针，这显然适用于 b-table 对象内的模板，但我认为我们应该能够传递行数据到 b-table.

之外的区域

有没有人尝试过以这种方式可视化 b-table 行数据？如果是，你是怎么做到的？

也许我需要为@row-clicked 编写一个事件处理函数，以便'passes' 将数据发送到具有特定 ID 的 b 卡？此时只是在黑暗中提出想法。

任何指向正确方向的指针或指向示例或文档的链接都将不胜感激。

Answer 1

如您所述，@row-clicked 事件发送被点击行的项目对象。

这意味着您可以使用该对象，并将其保存到 data 中的本地属性。然后可以在 table 的外部使用此属性，就像在 <b-card>.

中一样

new Vue({
  el: "#app",
  data() {
    return {
      fields: ["isActive", "first_name", "last_name", "age"],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        }
      ],
      selectedItem: null
    }
  },
  methods: {
    onRowClicked(item) {
      this.selectedItem = item
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-row>
    <b-col>
      <b-table :items="items" :fields="fields" bordered @row-clicked="onRowClicked" class="mb-0"></b-table>
    </b-col>
    <b-col>
      <b-card class="h-100">
        <pre v-if="selectedItem">{{ selectedItem }}</pre>
        <h4 class="text-center" v-else>
          No item selected.
        </h4>
      </b-card>
    </b-col>
  </b-row>
</div>

Bootstrap-vue b-table 将@row-clicked 数据传递到 b-card 外部 table 或模板？

Bootstrap-vue b-table passing @row-clicked data to a b-card outside the table or template?

javascript

vue.js

bootstrap-4

bootstrap-vue

Bootstrap-vue b-table 将@row-clicked 数据传递到 b-card *外部* table 或模板？

Bootstrap-vue b-table passing @row-clicked data to a b-card *outside* the table or template?

javascript

vue.js

bootstrap-4

bootstrap-vue

Bootstrap-vue b-table 将@row-clicked 数据传递到 b-card 外部 table 或模板？

Bootstrap-vue b-table passing @row-clicked data to a b-card outside the table or template?