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表文档的row details support部分所述，您可以更改行项目的_showDetails属性：

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

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

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

如this codepen

所示

Answer 2

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

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

说明

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

行对象不可访问是很可惜的，因此在这里不是toggleDetails选项。

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

2 个答案:

说明