Vue.js 在引导vue中将行详细信息拆分为多行

我目前正在编写我的第一个完整堆栈应用程序。我正在使用引导

来显示内容。在

行上单击

，我展开该行以显示嵌套数据。有没有一种方法可以迭代嵌套数据并在父b表中的嵌套行中显示它

目前，我可以显示数据，但它显示在一行中

component.vue

：

{{proc.Name}
{{proc.Id}

在所附图像中，已单击底部的一行。内容显示在一行中，但我希望它是单独的行，因此稍后我可以进一步单击它们以显示更多嵌套内容

数据示例：

{“\u id”：，“主机名”：，“地址”：，“进程”：[{“Name”：ApplicationHost，…}，{“Name”：svchost，…}]

---

如果这是不可能的，是否还有其他一些引导元素更能实现我想要的功能？

严格地回答您的问题：否，一个引导

的

行详细信息

行不能扩展为多行

行详细信息

行有严重限制：

• 只有一排
• 实际上只有一个单元格通过使用

  colspan

  扩展到行的全宽（这意味着您不能真正使用表列来对齐

  行详细信息的内容）

但…这是网络。在网络中，因为它是虚拟的，几乎任何事情都是可能的。当它不是虚拟的时候，你就做错了™.

通过在行展开时完全替换

行

，使用

计算的

，并在父行处于展开状态时将子行连接到其父行，可以实现所需的功能。概念证明：

Vue.config.productionTip=false；
Vue.config.devtools=false；
新Vue({
el:“#应用程序”，
数据：（）=>({
行：[
{id:'1'，name:'one'，展开：false，子项：[
{id:'1.1'，name:'one'}，
{id:'1.2'，name:'1-2'}，
{id:'1.3'，name:'1-3'}
]},
{id:'2'，name:'two'，展开：false，子项：[
{id:'2.1'，name:'two-one'}，
{id:'2.2'，name:'two-two'}，
{id:'2.3'，name:'two-three'}
]}
]
}),
计算：{
渲染行（）{
返回[].concat（[…this.rows.map（row=>row.expanded
？[row].concat（row.children）
：[世界其他地区]
)]).flat（）
}
}
})

tr.parent{cursor:pointer}

{{row.id}}
{{row.name}

一种方法（我个人在过去使用过）是简单地将嵌套的

放入子数据的子

行详细信息中，而不是尝试将它们添加到外部表中

还值得注意的是，如果子数据行与其父数据行的区别不够明显，那么将子数据行添加到外部表可能会在视觉上造成混乱

例如：


newvue({
el:“#应用程序”，
数据（）{
返回{
报告：[{u id:'id}1'，主机名：'Host1'，地址：'Addr1'，进程：[{Name:'ApplicationHost'，id:'1'}，{Name:'svchost'，id:'2'}]}，
{{u id:'id}2'，主机名：'Host2'，地址：'Addr2'，进程：[{Name:'ApplicationHost'，id:'3'}，{Name:'svchost'，id:'4'}]}，]，
字段：['Hostname'，'Address']，
}
},
})；

如果使用嵌套表，则会失去该表最有价值的功能：根据内容动态调整列大小。我的意思是，这正是人们使用表的原因。您可以使用大小相同的列（但如果您希望有比表更好的选项）或者，您可以通过侦听器在
resize
上动态地从父表列宽强制子表列宽。但我想说的是，简单地向行添加类以区分父表和子表是一种非常干净的方法。我使用了嵌套表。它变得太乱太快。我非常同意OP是否在寻找mult如果将嵌套级别设置为iple，则可能会变得凌乱（并被压扁）快速。我不同意您丢失动态调整大小-
bootstrap vue
表处理每个表的列大小调整，因此我根本看不出嵌套表如何减少这种情况。嵌套表的列与父列不对齐！？您从一开始就放弃了这一点。我想我误解了您，您是对的。我只是在上，如果子行数据的字段与父行数据的字段不同，则不认为这是一个有用的条件，这在本例中是正确的。表格应用于表格数据，而不是用于布局。因此，请考虑一个显示不同期间销售额的表格。当您单击其中一个时，应显示该期间的所有交易记录（或者可能是一个更小的周期单位，也可以扩展）。你显然希望总和和数量保持一致。如果你没有表格数据，你甚至不应该使用表格，而是一个无序的列表。对吗？如果这是不可能的，是否有其他一些boostrap元素可以更合理地实现我想要的？=>。