elementui打钩

以下是关于 Element UI 中打钩（勾选框/复选框）功能的使用方法和注意事项：

基础用法

在 Element UI 中使用 el-checkbox 组件实现单个勾选框：

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

v-model 绑定的 checked 应为布尔值，表示是否选中。

复选框组

多个复选框组合使用 el-checkbox-group 配合 el-checkbox：

<el-checkbox-group v-model="checkedList">
  <el-checkbox label="option1">选项1</el-checkbox>
  <el-checkbox label="option2">选项2</el-checkbox>
</el-checkbox-group>

v-model 绑定的 checkedList 应为数组，包含选中的 label 值。

禁用状态

通过 disabled 属性控制禁用：

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

自定义样式

使用 border 属性添加边框：

<el-checkbox v-model="checked" border>带边框选项</el-checkbox>

事件监听

通过 change 事件监听状态变化：

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

methods: {
  handleChange(val) {
    console.log('选中状态:', val);
  }
}

注意事项

• 确保正确导入 Element UI 组件及样式
• 复选框组的 v-model 必须绑定数组类型
• 国际化场景需注意 label 的显示文本处理