v模型中的全数组是行，而不仅仅是行的值

Question

我想在表中显示一个数组。在一列中，我使用了一个复选框，该复选框是已选中的还是未选中的，这取决于v-model的值，该值应该是每个元素的array.selected的值。然而，v模型包含整个array的所有array.selected元素，而不仅仅是当前行的元素。

有人知道如何引入一些行检查来只显示当前行的array.selected吗？

HTML部分：

<b-table :items="rooms" :fields="roomsHeader">
<template v-slot:cell(selected)="row" >
<b-checkbox v-for="(item, index) in rooms" v-model="item.selected" :key="index"></b-checkbox>
</template>
</b-table>

数据：

data () {
return {
rooms: [
{
"room": "A",
"capacity": 80,
"selected": false,
},
{
"room": "B",
"capacity": 140,
"selected": true,
},
{
"room": "C",
"capacity": 100,
"selected": true,
}
],
roomsHeader: [
{
key: 'room',
label: 'Raum'
},
{
key: 'capacity',
label: 'Kapazität'
},
{
key: 'selected',
label: 'Verfügbar'
}
],
}
},

输出屏幕截图(黄色为预期(

Answer 1

槽v-slot:cell(selected)="row"的内容是为表中的每一行计算的，因此像这样，它将为表中每一行的每一行都呈现一个复选框

在该插槽中不需要v-for，只需使用<b-checkbox v-model="row.item.selected" />即可

将作用域槽视为回调-每次b-table在当前行中呈现selected列时，它都会调用您的cell(selected)槽，以获取将当前行作为参数传递的内容。。。

文档