我做了一个 Vue.js 引导表，用于从本地 JSON 文件加载一些数据。 我已经实现了一个选项，用于显示/隐藏特定行的详细信息(显示特定行的完整数据消息(。我正在尝试实现一个复选框或按钮，我可以在其中展开/折叠(显示/隐藏(所有行的详细信息。我已经尝试了一些方法，但它似乎不起作用。我对 Vue 没有太多经验。 https://i.stack.imgur.com/Sqk62.jpg -->这就是应用程序现在的样子 https://codepen.io/frane_caleta/pen/KKPMKrL -->我的代码的代码笔，如果没有 JSON 文件，您将无法加载它 https://i.stack.imgur.com/fgh7o.jpg --> JSON 数据示例
请随时询问您是否需要有关此应用程序/项目的更多详细信息！
我显示/隐藏特定行详细信息的代码的一部分：
<b-table
id="myTable"
class="text-center"
:small="small"
:bordered="bordered" hover head-variant="dark"
v-if="activeFields.length > 0"
stacked="md"
:items="cptItems" :fields="activeFields" :current-page="currentPage" :per-page="perPage"
:filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" @filtered="onFiltered"
:tbody-tr-class="rowClass"
>
<template slot="actions" slot-scope="row">
<b-button size="sm" @click="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<b-card-text id="msg" class="text-break text-left" v-html="row.item.message"></b-card-text>
</b-card>
</template>
</b-table>
只需创建一个方法，该方法运行表集合中的每个项目，并将_showDetails设置为true表示打开，false设置为关闭。
在代码笔中，我还创建了一个计算属性，该属性检查集合中的任何元素是否打开，如果是，则返回true。 这样，我可以创建一个按钮来切换所有行。
https://codepen.io/Hiws/pen/dEqvEL