el-checkbox-group取消全选

Question

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>

初始的界面

点选择一个,其它全部都选择了!

Answer 1

要解决在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函数中处理选中项的逻辑。

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