获取行元素表单 row.clicked 事件

Question

我正在使用 Bootstrap Vue 中的 Table，我试图在单击一行时显示行详细信息。

我按照文档所说使用了 row-clicked 事件，但我没有找到任何带有 toggleDetails 方法的行详细信息。所以我什至不知道如何打开它以及toggleDetails来自哪里。

有一种方法可以使用 row.clicked 事件打开此详细信息行？

或者我应该使用其他方法来做到这一点？

你有什么线索吗？

编辑

有一些代码可以更多地说明我的问题，有我的 table 和详细信息行。

<b-table
  v-if="items"
  :items="items"
  :fields="fields"
  show-empty
  striped
  hover
  responsive
  empty-text="There is no messages to show"
  class="col-sm-12 col-md-10"
  @row-clicked="test"
>
  <template
    slot="message"
    slot-scope="row"
  >
    {{ row.item.message }}
  </template>
  <template
    slot="row-details"
    slot-scope="row"
  >
    <code>{{ row.item.message }}</code>
  </template>
</b-table>

您可以看到我在 table 上使用的 row.clicked 事件，然后是我尝试打开行详细信息的方法。这是一个简单的方法，有一些 console.log

methods: {
  test(item, index, event) {
    console.log(item, index, event);
  },
},

Answer 1

您所要做的就是在 "base" 行的某处（可能在名为 actions 的行单元格中）放置一个调用 toggleDetails 此特定行的函数。

此按钮和详细信息行的代码应如下所示：

<template slot="actions" slot-scope="row">
    <!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
    <b-button size="sm" @click.stop="row.toggleDetails">
        {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
    </b-button>
</template>
<template slot="row-details" slot-scope="row">
    <!-- Your row details' content here -->
</template>

您可以在 documentation

中找到更多示例和解释

如果您想通过单击行中的任意位置来显示行详细信息，首先您应该为每个项目对象添加一个 _showDetails 变量：

items: [
    { foo: true, bar: 40, _showDetails: false },
    ...
    { foo: true, bar: 100, _showDetails: false }
]

然后您只需为行单击事件添加适当的功能：

<b-table @row-clicked="onRowClicked" ...></b-table>

并且在您的组件方法中：

methods: {
    onRowClicked (item, index, event) {
        item._showDetails = !item._showDetails;
    }
}

获取行元素表单 row.clicked 事件

Get row element form row.clicked event

vue.js

vuejs2

bootstrap-vue