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

解釋

即使_showDetails不存在， $set也會保留反應性。

遺憾的是，行對象不可訪問，因此toggleDetails 不是這里的選項。

Answer 2

如 Bootstrap Vue 表文檔的行詳細信息支持部分所述，您可以更改行項的_showDetails屬性：

如果記錄的 _showDetails 屬性設置為 true，並且存在行詳細信息范圍的插槽，則將在項目下方顯示一個新行，其中包含行詳細信息范圍插槽的呈現內容。

在你的情況下，你會想要這樣的：

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

如本代碼筆所示