展开所有 Bootstrap-Vue b-table 行

Question

我有一个 b-table 看起来像这样：

<b-table :fields="fields" :items="tableRows">
  <template #head(expand_all+)="data">
    //would like to make this a button to expand all row-details
    <div class="text-right">{{data.label}}</div>
  </template>
  ...
  <template #cell(expand_all+)="data">
    <div class="expand-arrow-container":class="{ 'expanded': data.detailsShowing }" @click="data.toggleDetails">
      <font-awesome-icon icon="chevron-right" />
    </div>
  </template>
  ...
  <template #row-details="row">
    //display data here
  </template>
</b-table>

现在，所有这些工作正常，我的行详细信息 expand/contract 正如我所期望的（有关详细信息，请参阅 b-table row-details）。

出现问题是因为我希望能够单击一个按钮并 expand/contract 所有行详细信息。我的计划是将 template #head(expand_all+)="data" 更改为一个可以单击以完成此操作的按钮。但是，我不知道该怎么做。我已经搜索并阅读了 b-table 文档，但没有找到任何方法来完成我想要的。我什至查看了 table 对象，看它是否有任何对其行的引用，但我没有看到任何东西。

你们知道实现这个的方法吗？获取对行的引用将使这成为一个简单的问题，但正如我提到的，我没有看到任何东西。我也不打算将 b-table 换成一堆 b-collapse 元素，因为我在 table.

中投入了大量工作

Answer 1

如文档中所述，您可以在传递给 table 的项目上设置 _showDetails 属性。如果设置为 true 将扩展该行的详细信息。这意味着您可以遍历所有项目并将属性设置为 true 以展开所有行。对 false 做同样的事情来折叠它们。

If the record has its _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.

以下是您可以使用的两个示例方法。我们使用 $set 是因为我们正在向一个已经存在的对象添加一个新的属性。您可以阅读有关 here

原因的更多信息

expandAll() {
  for(const item of this.tableRows) {
    this.$set(item, '_showDetails', true)
  }
},
collapseAll() {
  for(const item of this.tableRows) {
    this.$set(item, '_showDetails', false)
  }
}

展开所有 Bootstrap-Vue b-table 行

Expand all Bootstrap-Vue b-table rows

vue.js

bootstrap-4

vuex

bootstrap-vue