关于在Vue中监听复选框按钮点击实现其他复选框的全选和反选功能

关于在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
    },
  },

最后的话就说一下吧，自己解决这个问题也是想了很久，看了官方文档的案列，也百度了很久最后终于能够解决这个问题，也算是记录一下了，希望能得到各位大佬的支持！！谢谢！！