elementui checked

关于 ElementUI 的 checked 状态

ElementUI 是一个基于 Vue.js 的组件库，其中 checked 属性通常用于复选框（Checkbox）或单选框（Radio）组件中，表示选中状态。以下是相关用法和注意事项：

Checkbox 组件使用 checked

在 ElementUI 的 Checkbox 组件中，可以通过 v-model 绑定一个布尔值来控制选中状态。例如：

<el-checkbox v-model="checked">选项</el-checkbox>

对应的 JavaScript 部分：

data() {
  return {
    checked: true // 默认选中
  }
}

Radio 组件使用 checked

对于 Radio 组件，可以通过 v-model 绑定一个值，当 Radio 的 label 值与绑定的值匹配时，该 Radio 会被选中：

<el-radio v-model="radio" label="1">选项1</el-radio>
<el-radio v-model="radio" label="2">选项2</el-radio>

JavaScript 部分：

data() {
  return {
    radio: '1' // 默认选中选项1
  }
}

动态设置 checked 状态

可以通过修改绑定的数据来动态改变选中状态。例如，在方法中修改 checked 或 radio 的值：

methods: {
  toggleCheckbox() {
    this.checked = !this.checked
  }
}

注意事项

• 确保 v-model 绑定的数据类型正确。Checkbox 通常绑定布尔值，而 Radio 绑定的是与 label 匹配的值。
• 对于 Checkbox 组件的 indeterminate 状态，表示半选状态，需手动控制。
• 在表单验证中，可以通过 el-form 的 rules 属性对选中状态进行验证。

如果需要更复杂的功能（如全选、半选等），可以结合使用 el-checkbox-group 和自定义逻辑实现。