展开所有 Bootstrap-Vue b-table 行答案

【问题标题】：Expand all Bootstrap-Vue b-table rows展开所有 Bootstrap-Vue b-table 行
【发布时间】：2021-09-12 02:01:50
【问题描述】：

我有一个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>

现在，所有这些都可以正常工作，并且我的行详细信息按预期扩展/收缩（有关更多信息，请参阅 b-table row-details）。

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

你们中有人知道实现此目的的方法吗？获取对行的引用会使这成为一个简单的问题，但正如我所提到的，我什么也没看到。我也不打算用一堆b-collapse 元素替换b-table，因为我已经在表格中做了很多工作。

【问题讨论】：

标签： vue.js bootstrap-4 vuex bootstrap-vue

【解决方案1】：

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

如果记录的_showDetails 属性设置为true，并且存在row-details 作用域槽，则将在项目下方显示一个新行，其中呈现的内容为row-details 作用域槽。

这是您可以使用的两个示例方法。我们使用$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)
  }
}

【讨论】：