关于在Vue中监听复选框按钮点击实现其他复选框的全选和反选功能
最近找到了一个实习工作，在项目中遇到了这个问题，看了elementui官方文档和百度了一些资料，最后结合起来实现了这个功能，话不多说直接看代码
首先是html，重要看的就是全选el-checkbox的监听事件还有v-model绑定的一个值和被选按钮的v-model值
<div class="monitoring_checkall"><el-checkbox border class="checkall"v-model="allCheck"@change="changeAllChecked(allCheck)">全选</el-checkbox></div><div class="group_box"><div class="node_group" v-for="(item, index) in nodeStyle" :key="index" ><div :style="item" class="node_group_checked"></div><el-checkbox label="item" border class="node":key="index"v-model="item.isCheck">{{item.name}}</el-checkbox></div></div>
然后是页面的一些数据，样式不用在意
data() {return {allCheck: false,nodeStyle: [{name: '节点1', border: 4 + 'px solid #00F7FE', isCheck: false },{name: '节点2', border: 4 + 'px solid #F8D03D', isCheck: false },{name: '节点3', border: 4 + 'px solid #56FF7A', isCheck: false },{name: '节点4', border: 4 + 'px solid #ED42ED', isCheck: false },{name: '节点5', border: 4 + 'px solid #9F10FA', isCheck: false },{name: '节点6', border: 4 + 'px solid #006CFE', isCheck: false },{name: '节点7', border: 4 + 'px solid #FE7200', isCheck: false },{name: '节点8', border: 4 + 'px solid #5C10E9', isCheck: false },{name: '节点9', border: 4 + 'px solid #29D78B', isCheck: false },{name: '节点10', border: 4 + 'px solid #B900FE', isCheck: false },{name: '节点11', border: 4 + 'px solid #00A7FE', isCheck: false },],}}
然后是methods里面绑定的方法，forEach遍历实现全选和反选的功能
changeAllChecked(data) {console.log(data)if (!data) {this.nodeStyle.forEach(function (item) {item.isCheck = false;});} else {this.nodeStyle.forEach(function (item) {item.isCheck = true;});}},
最后也很重要，watch监听判断全选按钮的选择状态
watch: {nodeStyle: {handler(value) {var count = 0;for (var i=0; i<value.length; i++){if (value[i].isCheck == true){count ++;}}if (count == value.length){this.allCheck = true;} else {this.allCheck = false;}},deep: true},},
最后的话就说一下吧，自己解决这个问题也是想了很久，看了官方文档的案列，也百度了很久最后终于能够解决这个问题，也算是记录一下了，希望能得到各位大佬的支持！！谢谢！！
如果觉得《关于在Vue中监听复选框按钮点击实现其他复选框的全选和反选功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
