Bootstrap Vue table: 单击行时显示详细信息

Question

尝试实现不同于文档的体验：显示行详细信息不是通过单击按钮，而是在单击行时。并且文档缺少有关如何使其与示例不同的详细信息。

<b-table
    v-if="tableIsReady"
    :items="deals"
    :fields="fields" 
    :per-page="recordsPerPage"
    no-local-sorting 
    @sort-changed="sorting" 
    responsive 
    flex 
    striped 
    hover
    @row-clicked="expandAdditionalInfo" 
  > 
   <template slot="row-details" slot-scope="row">
    <b-card>
      <h1>hello</h1>
    </b-card>
  </template>
 </b-table>

这是我的函数，但我认为它根本不起作用

expandAdditionalInfo(row) {
  row.showDetails();
}

Answer 1

如 Bootstrap Vue table 文档的 row details support 部分所述，您可以更改行项目的 _showDetails 属性：

If the record has it's _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot.

在你的情况下，你会想要这样的东西：

expandAdditionalInfo(row) {
  row._showDetails = !row._showDetails;
},

如 this codepen

所示

Answer 2

很难找到...但只需添加：

@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"

说明

即使 _showDetails 不存在，$set 仍保持反应性。

遗憾的是无法访问行对象，因此这里不能选择toggleDetails。

Bootstrap Vue table: 单击行时显示详细信息

Bootstrap Vue table: show details when row clicked

javascript

vue.js

bootstrap-vue

说明