b-table 项用于深层嵌套数组
b-table items for deeply nested arrays
我有一个 b-table，在那个 b-table 中，我使用 row.details 来显示更多信息。实际上，细节是整体数组的一个子数组。在 row.details 中，我想使用另一个 b-table 来显示所有细节。
最后，我将更改子数组的一些值。为此，我必须知道我在 row.details 中看到的 current row 的 index。
所以这是我的问题：对于我的第二个 b-table，我怎样才能这样设置项目，我仍然有我最初的 b-table?
的行路径
我正在考虑编写一些函数来将我当前所在的行存储在一个全局变量中，并在我的第二个 b-table 项中找到该索引，然后继续路径。
但我也想知道可能有一个更简单的解决方案，并从最初的 b-table.
“移交”路径
我的数据是这样的：
rooms:
[
{
room0: "firstroom",
details: [
{detail0: ""},
{detail1: [
{subDetail0: ""},
{subDetail1: ""}
]}
]
},
{
room1: "secondroom",
details: [
{detail0: ""},
{detail1: [
{subDetail0: ""},
{subDetail1: ""}
]}
]
},
],
subDetailsHeader:
[
{key: "details"},
...
]
这就是 bootstrap-vue html 的结构（对两个 tables 使用相同的项目 - 这“杀死”了第一个的路径table)
<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:
二三级用slots代替items即可解决整体问题b-table
但是，我仍然无法在第二层 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 显示为 table，然后单击一个日期，打开另一个详细信息部分/模式，我可以在其中编辑六个插槽这 room/period 对。为了用 v-model 存储它，我需要整个路径 room.period.slot
也许我错过了另一种方式。我也可以将其显示为 list，但我不知道如何将所选列表项的插槽分配到整个 v-model
我的初始 post 列出了第二个 b-table 中每个房间的所有时段。但是，我只想得到所选房间的时间。
// 编辑 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>
我尝试实现一个 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/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/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>
我有一个 b-table，在那个 b-table 中，我使用 row.details 来显示更多信息。实际上，细节是整体数组的一个子数组。在 row.details 中，我想使用另一个 b-table 来显示所有细节。
最后，我将更改子数组的一些值。为此，我必须知道我在 row.details 中看到的 current row 的 index。
所以这是我的问题：对于我的第二个 b-table，我怎样才能这样设置项目，我仍然有我最初的 b-table?
我正在考虑编写一些函数来将我当前所在的行存储在一个全局变量中，并在我的第二个 b-table 项中找到该索引，然后继续路径。 但我也想知道可能有一个更简单的解决方案，并从最初的 b-table.
“移交”路径我的数据是这样的：
rooms:
[
{
room0: "firstroom",
details: [
{detail0: ""},
{detail1: [
{subDetail0: ""},
{subDetail1: ""}
]}
]
},
{
room1: "secondroom",
details: [
{detail0: ""},
{detail1: [
{subDetail0: ""},
{subDetail1: ""}
]}
]
},
],
subDetailsHeader:
[
{key: "details"},
...
]
这就是 bootstrap-vue html 的结构（对两个 tables 使用相同的项目 - 这“杀死”了第一个的路径table)
<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:
二三级用slots代替items即可解决整体问题b-table
但是，我仍然无法在第二层 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 显示为 table，然后单击一个日期，打开另一个详细信息部分/模式，我可以在其中编辑六个插槽这 room/period 对。为了用 v-model 存储它，我需要整个路径 room.period.slot
也许我错过了另一种方式。我也可以将其显示为 list，但我不知道如何将所选列表项的插槽分配到整个 v-model
我的初始 post 列出了第二个 b-table 中每个房间的所有时段。但是，我只想得到所选房间的时间。
// 编辑 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>
我尝试实现一个 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/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/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>