https://blog.csdn.net/muge1161105403/article/details/107233916
<template>
<view class="content">
<view class="top">
<checkbox-group @change="seletedStatus" checked>
<checkbox :value="item.value" v-for="(item,index) in items" :key="index" :checked="checkList.includes(String(item.value))">{{item.name}}</checkbox>
</checkbox-group>
</view>
<view class="bottom">
<checkbox :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
</view>
</view>
</template>
<script>
export default {
data() {
return {
seletedAll: false,
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国',
checked: 'true'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
}
],
checkList: [], //选中值
};
},
methods: {
seletedStatus(e) {
this.checkList = e.detail.value
console.log(this.checkList)
if (this.checkList.length === this.items.length) {
this.seletedAll = true
}
},
_seletedAll(){
if(!this.seletedAll){
this.seletedAll=true
this.items.map(item=>{
this.checkList.push(item.value)
})
console.log(this.checkList)
console.log('true')
}else{
this.seletedAll=false
this.checkList=[]
console.log('false')
}
}
}
}
</script>
<style lang="less" scoped>
.content {
height: 600upx;
width: 100%;
background-color: #FFFFFF;
}
</style>