elementui checked

使用 ElementUI 的 Checkbox 组件

ElementUI 提供了 el-checkbox 和 el-checkbox-group 组件来实现复选框功能，支持单选、多选、全选等场景。

基本用法

通过 v-model 绑定布尔值控制复选框的选中状态：

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

data() {
  return {
    checked: false
  }
}

复选框组

使用 el-checkbox-group 配合 el-checkbox 实现多选：

<el-checkbox-group v-model="checkedList">
  <el-checkbox label="选项A"></el-checkbox>
  <el-checkbox label="选项B"></el-checkbox>
  <el-checkbox label="选项C"></el-checkbox>
</el-checkbox-group>

data() {
  return {
    checkedList: []
  }
}

禁用状态

通过 disabled 属性禁用复选框：

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

中间状态

使用 indeterminate 属性表示半选状态（常用于全选场景）：

<el-checkbox 
  v-model="checkAll" 
  :indeterminate="isIndeterminate"
  @change="handleCheckAllChange"
>全选</el-checkbox>

带边框样式

添加 border 属性显示边框：

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

事件处理

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

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

与表格结合

在 el-table 中使用复选框列：

<el-table :data="tableData">
  <el-table-column type="selection" width="55"></el-table-column>
  <!-- 其他列 -->
</el-table>