1. 基本用法:
<Checkbox label="选项1" v-model="checkboxValue1" />
<Checkbox label="选项2" v-model="checkboxValue2" />
在上述例子中，v-model 用于绑定选中状态，checkboxValue1 和 checkboxValue2 是在 data 中定义的变量。
2. 禁用状态:
<Checkbox label="选项1" v-model="checkboxValue1" disabled />
<Checkbox label="选项2" v-model="checkboxValue2" disabled />
添加 disabled 属性可以禁用多选框。
3. 按钮样式:
<Checkbox label="选项1" v-model="checkboxValue1" border />
<Checkbox label="选项2" v-model="checkboxValue2" border />
使用 border 属性可以使多选框呈现按钮样式。
4. 按钮组:
<Checkbox.Group v-model="checkboxGroupValue">
<Checkbox label="选项1" />
<Checkbox label="选项2" />
<Checkbox label="选项3" />
</Checkbox.Group>
使用 Checkbox.Group 包裹多个 Checkbox 可以创建一个多选按钮组。
5. 全选:
<Checkbox label="全选" v-model="checkAll" @change="handleCheckAll" />
<Checkbox.Group v-model="checkedItems" @change="handleCheckedItemsChange">
<Checkbox v-for="item in items" :label="item.value" :key="item.id">{{ item.label }}</Checkbox>
</Checkbox.Group>
在这个例子中，通过 Checkbox 创建一个全选框，以及使用 Checkbox.Group 管理多个选项。可以通过事件处理方法实现全选和子项的选中状态更新。
6. 自定义颜色:
<Checkbox label="选项1" v-model="checkboxValue1" style="color: #409EFF;" />
<Checkbox label="选项2" v-model="checkboxValue2" style="color: #67C23A;" />
通过添加 style 属性可以自定义多选框的颜色。
以上是一些常见的 Element-React Checkbox 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5599/Element-React