【发布时间】：2021-07-24 23:37:18
【问题描述】：
我有一个b-table，在那个 b 表中我使用row.details 来显示更多信息。实际上，细节是整体数组的一个子数组。在 row.details 中，我想使用另一个 b 表来显示所有详细信息。
最后，我将更改子数组的一些值。为此，我必须知道我在row.details 中看到的current row 中的index。
所以这是我的问题：对于我的第二个 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 中显示array/object
这是一个数据示例：
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
也许我错过了另一种方式。我也可以将它显示为list，但是我不知道如何将所选列表项的插槽分配到整个 v-model 中
我最初的帖子在第二个 b 表中列出了每个房间的所有时期。但是，我只想拥有所选房间的时间段。
// 编辑 2：
我遵循了 Iman 的想法，将我的第二个 b-table 替换为 custom table。现在我可以应用 v-model 并在我的多维数组中正确分配数据：
<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>
【问题讨论】：
标签： vue.js multidimensional-array bootstrap-vue v-model