<div >
<CheckboxGroup style="margin-left:78px;" @on-change="SelectQuestionType" v-model="selectTypes">
<Checkbox label="0" key="0" :v-text="0"> <span>全部</span></Checkbox>
<Checkbox v-for="item in questionTypes" :label="item.Id" :key="item.Id" ref="checkboxGroup">
<span>{{item.TypeName}}</span>
</Checkbox>
</CheckboxGroup>
</div>
<script>
export default {
data () {
return {
isAllCheck:false,
selectTypes:[],
}
},
mounted(){
this.GetQuestionTypes();
},
methods:{
GetQuestionTypes()
{
//此處省略請求代碼，result為后台數據
this.questionTypes=result;
},
SelectQuestionType(data)
{
var checkboxGroup=this.$refs.checkboxGroup;
var typeIds=data;
if(this.ArrayContain(data,"0"))
{
if(typeIds.length==checkboxGroup.length&& this.isAllCheck==true)
{
for(var i=0;i<typeIds.length;i++)
{
if(typeIds[i]=="0")
{
typeIds.splice(i,1);;break;
}
}
this.isAllCheck=false;
}else{
typeIds=[];
checkboxGroup.forEach(function(item,index){
typeIds.push(item.label);
});
typeIds.push("0");
this.isAllCheck=true;
}
}
else if(typeIds.length==checkboxGroup.length)
{
if(this.isAllCheck)
{
typeIds=[];
this.isAllCheck=false;
}else{
typeIds.push("0");
this.isAllCheck=true;
}
}
this.selectTypes=typeIds;
}，
ArrayContain(array,id)
{
var result=false;
for(var i=0;i<array.length;i++)
{
if(array[i]==id)
{
result=true;break;
}
}
return result;
}
}
}
</script>
如有更好的方法可以給個思路，謝謝！