选中 Vue 中一个复选框上的所有复选框

Question

我正在使用 Bootstrap vue。我尝试在一个复选框上选中我的 b 表中的所有复选框。我的复选框位于名为"selected"的插槽内的 b 表中标记中。

<b-table id="myTabel"
head-variant="light"
:items="items"
:fields="fields">
<template slot="selected" slot-scope="row">
<b-form-group>
<b-form-checkbox-group id="checkbox-group-2" v-model="selected">
<b-form-checkbox :value="row.item.mctname"/>
</b-form-checkbox-group>
</b-form-group>
</template>
</b-table>

这是我的"全选"复选框

<b-form-checkbox v-model="allSelected">
{{ allSelected ? 'Uncheck All' : 'Check All' }}         
</b-form-checkbox>

这是我的脚本代码

<script>
export default{
data: () => {
return {
selected:'',
items:[],
allSelected: false,
fields:{
mid: {
label: "MID",
mid: "MID",
},
mctname: {
label: "Name",
sortable: true,
},
status:{
label: "Status"
},                 
},
}
</script>

我正在为我的表数据使用公理

loadTable: function() {
this.loading = true;
axios
.get(baseUrl + ".../get_all_items")
.then(response => {
this.items = JSON.parse(response.request.responseText);
this.loading = false;
this.totalRows = this.items.length;
})
.catch(function(error) {
console.log(error);
this.loading = false;
});
},

如何在单击表格顶部的"全选中"复选框时选中所有复选框并取消选中所有复选框？选中所有复选框后，它将返回所有"mctname"数据。

Answer 1

你可以添加一个watch钩子：

watch: {
allSelected: {
immediate: true,
handler: function(val) {
if (val) {
this.selectAll = true;
this.returnData();
} else {
this.selectAll = false;
}
}
}
}

然后使所有复选框都依赖于selectAll