使用vue+iveiw+cheakbox实现全选和反全选功能
这个是全选效果
这是多选效果
接下来看代码实现
这是html页面
<div>选择考场:<Checkbox v-model="isCheckedAll">全选</Checkbox> </div>
<Checkbox v-for="(item, index) in roomListDatas" :key="index" v-model="item.checked">{{item.roomName}}<span style="margin-left:6px">(空位{{item.vacantNumber}})</span></Checkbox>
通过vue中的监听方法全选和反全选功能
export default {
name: 'parentsConfirm',
data() {
return {
isCheckedAll:'',
roomListDatas: [], // 考场列表
};
},
methods: {
},
watch: {
'isCheckedAll'(value){
this.roomListDatas.forEach((item,index) => {
item.checked = value;
});
}
}
};
</script>``
## 代码解释
isCheckedAll监听,主要是通过value值来控制,有两个值true和false,roomListDatas是每个选项的数据,通过遍历添加属性checked,和我页面v-model="item.checked"实现数据双向绑定。