原始代码结构
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="item"
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
export default {
data() {
return {
list: ['a', 'b'],
result: [],
};
},
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
},
},
};
实现方法:
this.$refs.checkboxes.checked就是控制是否选中的东西,这是一个数组,所以需要循环,我们只需要点击全选按钮然后把所有的checked改成true就可以了。
select_All(){
if(this.checked){
this.$refs.checkboxes.map(item=>{
return item.checked=true
})
}else{
this.$refs.checkboxes.map(item=>{
return item.checked=false
})
}
},