el-checkbox如何设置默认勾选状态？

Question

在使用 Element UI 开发 Vue 应用时，如何为 `el-checkbox` 设置默认勾选状态是一个常见问题。很多开发者在初次使用时不清楚应通过哪个属性控制初始选中状态。实际上，`el-checkbox` 组件通过 `v-model` 或 `value` 属性来绑定选中状态，初始值为 `true` 时即可实现默认勾选。若未正确设置初始值或未使用双向绑定，将无法实现默认选中效果。因此，理解 `v-model` 与 `value` 的使用方式是解决 el-checkbox 默认勾选问题的关键。

Answer 1

1. 理解 el-checkbox 的基本用法

el-checkbox 是 Element UI 提供的一个基础表单组件，用于实现多选功能。在 Vue 应用中，它通常用于表示布尔值的选择状态，例如“是否同意协议”、“是否启用某项功能”等场景。

其核心属性包括：

• v-model：用于双向绑定选中状态
• value：设置或获取当前选中状态
• label：在多选组中表示该选项的值

例如，一个简单的 el-checkbox 组件使用方式如下：

<template>
  <el-checkbox v-model="isChecked">是否启用功能</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      isChecked: true
    };
  }
};
</script>

2. 设置默认勾选状态的常见误区

很多开发者在初次使用 el-checkbox 时，可能会尝试使用 checked 属性来设置默认勾选状态。然而，Element UI 的官方文档中并未提供 checked 这一属性。

以下是一个错误的示例：

<el-checkbox checked>错误的默认勾选方式</el-checkbox>

上述写法并不会生效，因为 el-checkbox 的状态必须通过 v-model 或 value 来控制。

因此，理解 Vue 的双向绑定机制与 el-checkbox 的属性使用，是正确设置默认状态的前提。

3. 使用 v-model 实现默认勾选

v-model 是 Vue 中用于实现双向绑定的语法糖，常用于表单控件中。在 el-checkbox 中，通过 v-model 可以直接绑定一个布尔值。

示例代码如下：

<template>
  <el-checkbox v-model="isChecked">默认勾选状态</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      isChecked: true
    };
  }
};
</script>

在该示例中，isChecked 初始化为 true，因此 el-checkbox 默认处于勾选状态。

4. 使用 value 属性绑定初始状态

除了 v-model，还可以使用 value 属性来绑定初始状态。此时，组件的值将由 value 控制，但不会自动更新父组件的数据。

示例代码如下：

<template>
  <el-checkbox :value="isChecked">只读状态下的默认勾选</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      isChecked: true
    };
  }
};
</script>

这种方式适用于只读场景，或需要手动控制状态更新的场合。

5. 多选组中设置默认勾选

在多个 el-checkbox 组成的复选框组中，可以通过 el-checkbox-group 来管理多个选项的选中状态。

示例代码如下：

<template>
  <el-checkbox-group v-model="selectedOptions">
    <el-checkbox label="option1">选项1</el-checkbox>
    <el-checkbox label="option2">选项2</el-checkbox>
    <el-checkbox label="option3">选项3</el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: ['option1', 'option3']
    };
  }
};
</script>

在该示例中，selectedOptions 初始值为 ['option1', 'option3']，因此这两个选项默认被勾选。

6. 常见问题排查流程图

为了帮助开发者快速定位问题，以下是一个关于 el-checkbox 默认勾选失败的排查流程图：

```mermaid
graph TD
A[开始] --> B{是否使用v-model或value绑定}
B -- 否 --> C[添加v-model或value绑定]
B -- 是 --> D{绑定值是否初始化为true}
D -- 否 --> E[将绑定值初始化为true]
D -- 是 --> F[检查是否被其他逻辑覆盖]
F --> G{是否有watch或事件修改状态}
G -- 是 --> H[检查逻辑是否合理]
G -- 否 --> I[确认是否为只读状态]
I -- 是 --> J[使用:value代替v-model]
I -- 否 --> K[完成]
```

7. 最佳实践总结

在使用 el-checkbox 设置默认勾选状态时，建议遵循以下最佳实践：

场景	推荐方式	说明
单个复选框	v-model	适合需要双向绑定的场景
只读复选框	:value	适合仅需显示状态，不需交互更新
多个复选框	el-checkbox-group + v-model	统一管理多个选项的状态