Javascript 基于API的响应显示多个引导VueJS表

我正在使用引导vue表。目前，我的整个数据都驻留在一个表中。假设此表中有10行，前5行在第一列中包含value

A

，而下5行在第一列中包含value

B

我想要的是，我将这个表拆分，以便在我的页面上显示两个表，而不是一个包含完整数据的表。第一个表将包含值为

A

的所有行，第二个表将包含值为

B

的所有行。实际上，我会有很多这样的唯一值，所以假设我有10个这样的值，我想要10个基于这些值的单独的表。这可能吗

另一个想法可能是，如果上面不可能，我可以有可折叠的行吗？我不是在谈论

更多详细信息

功能，而是当我单击

A

时，所有值为

A

的行都将显示在同一个表中，每个行都作为一行显示在表中

---

我最初考虑的行可以跨越列（），但不幸的是，bootstrap vue js表还不支持这一点

可以通过使用将数组拆分为组的计算属性来实现这一点

此计算属性将返回一个对象，该对象包含一个键，该键将是您分组所依据的值，该值将是一个包含该组中所有项的数组

/*计算属性将返回的示例结构*/
{
A:[]，
B:[]，
C:[]
}

然后，您可以使用

v-for

查找

groupedItems

---

示例代码段： 这是一个相当基本的示例，只显示类型的标题和下面的表

/*生成一些随机示例数据*/
常量类型=['A'，'B'，'C']
常量项=[]；
for（设i=0；i<15；i++）{
推({
类型：类型[i%3]，
id:i+1，
random:Math.random（）
})
}
新Vue({
el:“#应用程序”，
计算：{
groupedItems（）{
常量组={}；
this.items.forEach（item=>{
if（组[项目类型]）{
组[项目.类型].推送（项目）；
}否则{
组[项目类型]=[项目]；
}
});
返回组；
}
},
数据（）{
返回{
项目:项目,，
字段：['type'，'id'，'random']
}
}
})

类型：{{Type}}
类型：{{value}}

太好了。这就是我想要的。有没有什么方法可以让我默认看到所有的表？默认情况下，它们现在是关闭的。如果您是指在第二个示例中。移除

accordion=“table accordion”

并将

visible

添加到

b-collapse

。太好了，明白了。非常感谢你的帮助。我只是想问一下，这个可以进一步嵌套吗？比如，在A型手风琴下我们可以有更多这样的手风琴？然后分别在B型和C型下？比方说，当我单击“类型A”时，它会显示3个标题，单击其中一个标题最终会打开一个表。@JohnDoe我添加了另一个级别的代码段。太好了，非常感谢您的帮助。这太神奇了。