vue checkbox全选 全不选 反选

Question

 <el-col :span="24">
                  <el-form-item label="模块"></el-form-item>
                  <el-checkbox-group v-model="checkList_1">
                    <el-checkbox v-for="(item,index) in menu_module_1" :key="index" :label="index+1">{{item}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="方法"></el-form-item>
                  <el-checkbox-group v-model="checkList_2">
                    <el-checkbox v-for="(item,index) in menu_module_2" :key="index" :label="index+1">{{item}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>

checkbox列表是从后台获取的，选中第四个填报数据的时候下面三个全选全不选。选中下面任意几个填报数据即选中，全部取消即填报数据不选

Answer 1

研究了一会儿 废话不多说 直接上代码

// 模块选择框响应事件
      handleMenuIds(val) {
        const index = val.indexOf(4);
        if (index === -1) {
          this.subitemIds = [];
          return;
        }
        if (this.subitemIds.length === 0 && index !== -1) {
          this.subitemIds = [1, 2, 3];
        }
      },
      // 方法选择框响应事件
      handleSubitemIds(val) {
        const index = this.menuIds.indexOf(4);
        // 如果方法没有选择项
        if (!val.length) {
          // 模块删除填报数据选项
          if (index !== -1) {
            this.menuIds.splice(index, 1);
          }
          return;
        }
        // 如果方法有选择项
        if (val.length) {
          // 模块增加数据选项
          if (index === -1) {
            this.menuIds.push(4);
          }
        }
      },

Answer 2

最便捷的方法就是给 checkbox 添加个 @change 方法，然后在触发 change 的时候去判断是不是 填报数据 被勾选，如果是，然后把 checkList_2 中的数据选中,同样判断 checkList_2 中的是不是至少有一个被勾选，如果是，则 填报数据 被选中