我有一个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行详细信息(。
问题在于，我希望能够单击一个按钮并展开/收缩所有行的详细信息。我的计划是将template #head(expand_all+)="data"更改为一个可以单击的按钮来实现这一点。但是，我不知道该怎么做。我已经搜索并阅读了b-table文档，但没有找到任何实现我想要的东西的方法。我甚至看了一下表对象，看看它是否对其行有任何引用，但什么也没看到。
你们中有人知道如何做到这一点吗？获取对行的引用会使这成为一个简单的问题，但正如我所提到的，我什么都没看到。我也不想用一堆b-collapse元素来交换b-table，因为我已经在表中做了很多工作。
如文档中所述，您可以对传递到表的项设置_showDetails属性。如果设置为true，将展开该行的详细信息。这意味着您可以循环浏览所有项，并将该属性设置为true以展开所有行。并对false进行同样的操作以使它们崩溃。
如果记录的
_showDetails属性设置为true，并且存在行详细信息范围的槽，则会在项目下方显示一个新行，其中包含行详细信息作用域槽的呈现内容。
这里有两个可以使用的示例方法。我们之所以使用$set，是因为我们正在向已经存在的对象添加一个新属性。你可以在这里阅读更多关于的原因
expandAll() {
for(const item of this.tableRows) {
this.$set(item, '_showDetails', true)
}
},
collapseAll() {
for(const item of this.tableRows) {
this.$set(item, '_showDetails', false)
}
}