使用vue+iveiw+cheakbox实现全选和反全选功能

使用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"实现数据双向绑定。