javascript - Bootstrap Vue 表 : show details when row clicked

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)"

说明

即使 _showDetails 不存在，$set 也会保留 react 性。

遗憾的是行对象不可访问，所以toggleDetails在这里不是一个选项。