Bootstrap Vue表：单击行时显示详细信息

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

很难找到...但只需添加以下内容：

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

解释

该$set保留即使反应_showDetails并不存在。

遗憾的是，行对象不可访问，因此toggleDetails 不是这里的选项。

Answer 2

如Bootstrap Vue表文档的行详细信息支持部分所述，您可以更改_showDetails行项目的属性：

如果记录的_showDetails属性设置为true，并且存在行详细范围的槽，则会在该项目的正下方显示新行，并显示行详细范围的槽的内容。

在您的情况下，您需要以下内容：

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

如本代码笔所示