javascript - 展开/折叠引导 Vue.js 表中的所有操作

Question

我制作了一个 Vue.js 引导表，用于从本地 JSON 文件加载一些数据。我已经实现了一个用于显示/隐藏特定行详细信息的选项(显示特定行的完整数据消息)。我正在尝试实现一个复选框或按钮，可以在其中展开/折叠(显示/隐藏)所有行的详细信息。我尝试了一些方法，但似乎不起作用。我对 Vue 没有太多经验。 /image/Sqk62.jpg --> 这就是应用程序现在的样子 https://codepen.io/frane_caleta/pen/KKPMKrL --> 我的代码的 codepen，但是如果没有 JSON 文件，您将无法加载它 /image/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>

Answer 1

您可以简单地创建一个对表集合中的每个项目运行的方法，并将 _showDetails 设置为 true(打开)和 false(打开)已关闭。

在codepen中，我还创建了一个计算属性，它检查集合中的任何元素是否打开，如果是，则返回true。这样我就可以创建一个按钮来切换所有行。

https://codepen.io/Hiws/pen/dEqvEL