<template>
<!-- 在该框架中,template里面编写html要注意一点,只有一个根标签-->
<div>
<!-- 复选框的样式属性需要自己去配置的,具体 看Quasar Framework框架的API文档-->
<q-checkbox @input="checkAll()" v-model="allChecked" checked-icon="check_circle_outline" unchecked-icon="radio_button_unchecked" label="全选" style="font-size: 12px;" color="grey" size="sm"/>
<div v-for="value in proData">
<!--<span>{{value}}++++++{{value.name}}</span>--><!--重点了解-->
<q-checkbox v-model="selection" :val="value.name" label="One" /><!-- val的值是下面数组的值,具体看Quasar Framework框架的API文档 -->
<br><br>
</div>
</div>
</template>
<script>
export default {
data () {
return {
allChecked: false,
selection: [],//双向绑定selection数据数组
proData:[{
name: '111'
}, {
name: '222'
}, {
name: '333'
}, {
name: '444'
}]
}
},
methods: {
checkAll(){
var this_=this;//如果没有这句话,则会报错显示checkArray没有声明或找不到
if(this_.allChecked == true){//checkbox的状态为已勾选
this_.selection = [];
this_.proData.forEach(function(item){
//console.log(item.name);
this_.selection.push(item.name);
});
}else{
//console.log("未勾选");
this_.selection = [];
}
}
},
watch: { // 监视双向绑定的数据数组
selection: {
handler(){ // 数据数组有变化将触发此函数
if(this.selection.length == this.proData.length){
this.allChecked = true;
}else{
this.allChecked = false;
}
},
}
}
}
</script>
<style>
</style>