我有一个 b-table，在该 b-table 中我使用 row.details 显示更多信息。事实上，细节是整体数组的一个子数组。在 row.details 中，我想使用另一个 b 表来显示所有详细信息。
最终，我将更改子数组的一些值。为此，我必须知道在 row.details 中查看的当前行的索引。
所以这是我的问题:对于我的第二个 b 表，如何以这种方式设置项目，以便我仍然拥有初始 b 表中的行路径？
我正在考虑编写一些函数来将我当前所在的行存储在全局变量中，并在我的第二个 b 表项中找到该索引，然后继续该路径。 但我也想知道可能有一个更简单的解决方案并“移交”初始 b 表中的路径。
我的数据如下所示:
rooms:
[
{
room0: "firstroom",
details: [
{detail0: ""},
{detail1: [
{subDetail0: ""},
{subDetail1: ""}
]}
]
},
{
room1: "secondroom",
details: [
{detail0: ""},
{detail1: [
{subDetail0: ""},
{subDetail1: ""}
]}
]
},
],
subDetailsHeader:
[
{key: "details"},
...
]
这就是 bootstrap-vue html 的结构(两个表使用相同的项目 - 这“杀死”第一个表的路径)
<b-table :items="rooms" :fields="roomsHeader" head-variant="light">
<template #cell(actions)="row" >
<button @click="row.toggleDetails()">Details</button>
</template>
<template v-slot:cell(selected)="row" >
<b-table :items="rooms" :fields"subDetailsHeader">
<template #cell(date)="row">
{{ row.items }}
</template>
</b-table>
</template>
</b-table>
{{ row.items }} 现在显示所有房间的详细信息，而我只想显示所选房间的详细信息(这就是为什么我说“杀死房间路径”)。
实际上，当我按照相同(嵌套)方案添加 subDetails 时，我也会遇到同样的问题。非常感谢帮助或建议，因为我对编程还很陌生:)提前致谢!
//编辑1:
对于第二层和第三层b-table使用slots而不是items可以解决整体问题
但是，我在二级 b-table 中显示数组/对象时仍然遇到问题
这是一个数据示例:
rooms:
[
{
"room": "HS004",
"maxcapacity": 200,
"selected": true,
"period": {
"2021-05-10": [
{"slot_one": 200},
{"slot_two": 200},
{"slot_three": 200},
{"slot_four": 200},
{"slot_five": 200},
{"slot_six": 200}
],
"2021-05-11": [
{"slot_one": 200},
{"slot_two": 200},
{"slot_three": 200},
{"slot_four": 200},
{"slot_five": 200},
{"slot_six": 200}
],
"2021-05-12": [
{"slot_one": 200},
{"slot_two": 200},
{"slot_three": 200},
{"slot_four": 200},
{"slot_five": 200},
{"slot_six": 200}
]
}
},
{
"room": "HS006",
"maxcapacity": 200,
"selected": true,
"period": {
"2021-05-10": [
{"slot_one": 150},
{"slot_two": 150},
{"slot_three": 150},
{"slot_four": 150},
{"slot_five": 150},
{"slot_six": 150}
],
"2021-05-11": [
{"slot_one": 200},
{"slot_two": 200},
{"slot_three": 200},
{"slot_four": 0},
{"slot_five": 0},
{"slot_six": 0}
],
"2021-05-12": [
{"slot_one": 150},
{"slot_two": 150},
{"slot_three": 150},
{"slot_four": 150},
{"slot_five": 150},
{"slot_six": 150}
]
}
}
]
我的目标是，将每个 row.item.period 的 objectNames 显示为表格，并通过单击一个日期，打开另一个详细信息部分/模式，我可以在其中编辑该房间/时段对的六个插槽。为了用 v-model 存储它，我需要整个路径 room.period.slot
也许我错过了另一种方式。我也可以将其显示为列表，但随后我不知道如何将所选列表项的“槽”分配到整个 v 模型中
我最初的帖子在第二个 b 表中列出了每个房间的所有时段。但是，我只想知道所选房间的时期。
//编辑2:
我遵循 Iman 的想法，用自定义表替换了我的第二个b-table。现在我可以应用 v 模型并在多维数组中正确分配数据:
<b-table :items="roomTest" :fields="roomsHeader" head-variant="light">
<template #cell(actions)="row">
<b-button @click="row.toggleDetails()">Details</b-button>
</template>
<template v-slot:row-details="row">
<table>
<thead>
<tr>
<th>Datum</th>
<th>08:00</th>
<th>10:00</th>
<th>12:00</th>
<th>14:00</th>
<th>16:00</th>
<th>18:00</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in row.item.period" :key="key">
<td>
{{ key }}
</td>
<td><input type="text" v-model="Object.values(value[0])"></td>
<td><input type="text" v-model="Object.values(value[1])"></td>
<td><input type="text" v-model="Object.values(value[2])"></td>
<td><input type="text" v-model="Object.values(value[3])"></td>
<td><input type="text" v-model="Object.values(value[4])"></td>
<td><input type="text" v-model="Object.values(value[5])"></td>
</tr>
</tbody>
</table>
</template>
</b-table>
最佳答案
我尝试实现一个 3 层 b-table，每行都有一个 toggle 按钮。您应该快速浏览一下 row-details-support
new Vue({
el: '#app',
data() {
return {
roomsHeader: [
'room', 'actions'
],
subRoomsHeader: [
'sub_room', 'feature', 'actions'
],
rooms: [{
room: "firstroom",
details: [{
sub_room: "sub_room_1",
feature: "F1",
"details": [{
sub_room_2: "sub room 2",
feature_2: "F2"
}]
}]
}, ],
}
},
methods: {
toggleDetails() {
}
}
})<link type="text/css" rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5dec5d8" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcadf0aba8b89deff3efecf3ef" rel="noreferrer noopener nofollow">[email protected]</a>/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7701021237455941594645" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fc2999a8aafddc1dddec1dd" rel="noreferrer noopener nofollow">[email protected]</a>/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-table :items="rooms" :fields="roomsHeader" head-variant="light">
<template #cell(actions)="row">
<b-button @click="row.toggleDetails()">Details</b-button>
</template>
<template v-slot:row-details="row">
<b-table :items="row.item.details" :fields="subRoomsHeader">
<template #cell(actions)="row">
<b-button @click="row.toggleDetails()">Details</b-button>
</template>
<template v-slot:row-details="row">
<b-table :items="row.item.details"></b-table>
</template>
</b-table>
</template>
</b-table>
</div>关于vue.js - 深度嵌套数组的 b 表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67354006/