vuetify checkboxgroup 资料比较少 自己动手
代码如下：
<template>
<div>
<v-row>
<v-checkbox v-model="selectAll" label="全选" @change="selectAllFun" ></v-checkbox>
</v-row>
<v-row>
<div v-for="(item,index) in listDate" :key="index">
<v-checkbox v-model="item.checkitem" :label="item.label" @change="childrenSelect(item.id,item.checkitem)"></v-checkbox>
</div>
</v-row>
</div>
</template>
<script>
export default {
name:"demo",
data() {
return {
selectAll:false,
selcetId:[],
listDate:[
{
checkitem:false,
id:1,
label:'小明'
},
{
checkitem:false,
id:2,
label:'小红'
},
{
checkitem:false,
id:3,
label:'小花'
},
{
checkitem:false,
id:4,
label:'小王'
},
{
checkitem:false,
id:5,
label:'小陈'
},
{
checkitem:false,
id:6,
label:'小李'
},
]
}
},
created(){
if(!this.selectAll){
for(let i=0;i<this.listDate.length;i++){
this.listDate[i].checkitem=false
}
}
},
methods: {
selectAllFun(){
if(this.selectAll){
for(let i=0;i<this.listDate.length;i++){
this.listDate[i].checkitem=true;
this.selcetId.push(this.listDate[i].id)
}
}else{
for(let i=0;i<this.listDate.length;i++){
this.listDate[i].checkitem=false
}
this.selcetId=[]
}
let arry =this.selcetId
this.selcetId=[]
for(let i=0;i<arry.length;i++){
if(this.selcetId.indexOf(arry[i])===-1){
this.selcetId.push(arry[i])
}
}
console.log(this.selcetId)
},
childrenSelect(id,check){
console.log(id,check)
console.log(this.selcetId)
if(check){
this.selcetId.push(id)
}else{
for(let i=0;i<=this.selcetId.length;i++){
if(id == this.selcetId[i]){
console.log(i,this.selcetId[i])
this.selcetId.splice(i,1)
}
}
}
console.log(this.selcetId)
if(this.selcetId.length == this.listDate.length){
this.selectAll=true
}else{
this.selectAll =false
}
}
}
}
</script>
