el-checkbox-group修改问题

### 解决 Element UI 中 `el-checkbox-group` 的使用问题

#### 绑定数据类型不匹配的问题
当使用 `el-checkbox-group` 时，如果发现其行为不符合预期，可能是因为 `v-model` 所绑定的数据类型与期望不符。具体来说，`el-checkbox-group` 只支持一维数组作为 `v-model` 的值[^1]。

// 错误示范：尝试绑定对象数组
data() {
    return {
        selectedItems: [
            { id: 1, name: 'Apple' },
            { id: 2, name: 'Banana' }
        ]
    };
}

为了修正这个问题，应该确保 `selectedItems` 是一个仅包含所选项 ID 或者其他唯一标识符的一维数组：

// 正确做法：绑定简单的一维数组
data() {
    return {
        selectedItems: [1, 2]
    };
}

#### 布局对齐问题
对于布局方面的要求，可以利用 CSS Flexbox 来实现更灵活的排列方式。通过自定义类名来控制内部元素的显示效果是一个不错的选择[^2]。

<template>
  <el-checkbox-group v-model="fruitsIds">
    <div class="flex-container">
      <div class="flex-item" v-for="item in fruitsList" :key="item.id">
        <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
      </div>
    </div>
  </el-checkbox-group>
</template>

<style scoped>
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 20%;
}
</style>

上述代码片段展示了如何创建一个多列式的复选框组，并且每个项占据页面宽度的一部分。

#### 处理全选逻辑错误的情况
有时可能会遇到点击单个复选框却触发了整个分组被选中的情况。这通常是由于初始化状态设置不当造成的。确保初始状态下 `v-model` 对应的变量为空数组或合理默认值是非常重要的[^3]。

export default {
  data() {
    return {
      checkedRoles: [] // 初始化为空数组而非布尔值或其他形式
    };
  }
};

此外，在处理事件监听器时也要注意避免不必要的副作用发生，比如在方法内直接修改原始数据结构等可能导致意外的行为。