el-checkbox-group取消全选

vue2中 el-checkbox 被全选择的问题
vue2中,v-for的div 里面的el-checkbox-group中再v-for出el-checkbox,问题是点击一个el-checkbox,其它所有el-checkbox都被选中或者取消,请问这个问题怎么解决?

 <div class="btnitem" v-for="(item,index) in newChildList" :key="index">
                    {{item.id}}
                    <el-checkbox-group v-model="vals" class="checkBoxGroup" @change="changeItem ">
                        <div v-for="(obj,idx) in item.content" :key="obj.id">

                            <el-checkbox style="display: flex;">{{obj.val}}</el-checkbox>
                            <div> </div>
                            </el-checkbox-button>
                        </div>
                    </el-checkbox-group>

初始的界面

要解决在Vue2中使用v-for生成多个el-checkbox时出现全选问题，你可以使用一个额外的v-model来跟踪每个el-checkbox的选中状态，并在点击时更新这个v-model。

以下是示例代码，展示了如何解决这个问题：

<template>
  <div>
    <div class="btnitem" v-for="(item,index) in newChildList" :key="index">
      {{ item.id }}
      <el-checkbox-group class="checkBoxGroup">
        <div v-for="(obj,idx) in item.content" :key="obj.id">
          <el-checkbox v-model="checkboxValues[idx]">{{ obj.val }}</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newChildList: [
        {
          id: 1,
          content: [{ id: 1, val: 'Option 1' }, { id: 2, val: 'Option 2' }]
        },
        {
          id: 2,
          content: [{ id: 3, val: 'Option 3' }, { id: 4, val: 'Option 4' }]
        }
      ],
      checkboxValues: []
    }
  },
  watch: {
    checkboxValues: {
      handler(newValues) {
        // 在这里可以处理选中项的逻辑
        console.log(newValues)
      },
      deep: true
    }
  }
}
</script>

在上述代码中，我们使用了一个新的checkboxValues数组来跟踪每个el-checkbox的选中状态。在v-for循环中，我们将每个el-checkbox的选中状态绑定到对应位置的checkboxValues数组元素上。

通过watch选项，我们监视checkboxValues数组的变化，并可以在handler函数中处理选中项的逻辑。

请根据你的实际需求，修改以上示例代码，以适应你的组件逻辑。

【以下回答由 GPT 生成】

这个问题是由于v-for在el-checkbox-group中嵌套了另一个v-for导致的。每个el-checkbox都绑定了同一个v-model值（vals），当其中一个checkbox的选中状态改变时，会影响到其他所有checkbox的选中状态。

为了解决这个问题，我们需要给每个checkbox绑定一个独立的v-model值，而不是共用同一个v-model值。

以下是解决该问题的具体步骤：

1. 在data中添加一个数组，用于存储每个checkbox的选中状态，例如checkboxStatus。
2. 修改v-for循环，给每个checkbox绑定独立的v-model值，可以使用checkboxStatus数组的索引来实现。
3. 修改changeItem方法，更新checkboxStatus数组中对应checkbox的选中状态。

具体代码如下：

<template>
  <div>
    <div class="btnitem" v-for="(item, index) in newChildList" :key="index">
      {{ item.id }}
      <el-checkbox-group class="checkBoxGroup">
        <div v-for="(obj, idx) in item.content" :key="obj.id">
          <el-checkbox style="display: flex;" v-model="checkboxStatus[index][idx]">
            {{ obj.val }}
          </el-checkbox>
          <div></div>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxStatus: [],
      vals: []
    };
  },
  mounted() {
    // 初始化checkboxStatus数组
    this.newChildList.forEach((item, index) => {
      this.checkboxStatus[index] = [];
      item.content.forEach((obj, idx) => {
        this.checkboxStatus[index][idx] = false;
      });
    });
  },
  methods: {
    changeItem() {
      // 更新checkboxStatus数组
      this.newChildList.forEach((item, index) => {
        item.content.forEach((obj, idx) => {
          this.checkboxStatus[index][idx] = this.vals.includes(obj.val);
        });
      });
    }
  }
};
</script>

通过以上代码，每个checkbox都拥有了独立的选中状态，并且选中一个checkbox不会影响到其他checkbox的选中状态。

请注意，上述解决方案适用于使用v-for循环渲染的el-checkbox-group中再次使用v-for渲染el-checkbox的情况。如果遇到其他类似的问题，可以根据此思路进行调整。

【相关推荐】

• 这篇博客: el-checkbox-group 的使用中的 还是没有明白其中的道理 先学会怎么用吧 -_- 部分也许能够解决你的问题。