当前位置：首页 > 前端教程

elementui checkbox

2026-03-06 07:00:10前端教程

使用 ElementUI Checkbox 基础用法

在 ElementUI 中，el-checkbox 是常用的多选框组件，适用于表单中的多选场景。
通过 v-model 绑定布尔值，可以控制复选框的选中状态。

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

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

复选框组（Checkbox Group）

需要多个复选框联动时，使用 el-checkbox-group 包裹 el-checkbox，通过数组绑定选中的值。

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      checkedList: []
    }
  }
}
</script>

禁用状态

通过 disabled 属性禁用单个复选框或整个复选框组。

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

中间状态与全选功能

通过 indeterminate 属性实现中间状态（部分选中），常用于全选场景。

<template>
  <el-checkbox 
    v-model="checkAll" 
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >全选</el-checkbox>
  <el-checkbox-group v-model="checkedItems" @change="handleCheckedChange">
    <el-checkbox v-for="item in options" :label="item" :key="item"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkedItems: ['选项A'],
      options: ['选项A', '选项B', '选项C']
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedItems = val ? this.options : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    }
  }
}
</script>

自定义样式与事件

支持通过 border 属性添加边框样式，或监听 change 事件处理选中变化。

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

与表单验证结合

在 el-form 中配合 rules 实现多选框组的验证。

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="选择项" prop="items">
      <el-checkbox-group v-model="form.items">
        <el-checkbox label="选项A"></el-checkbox>
        <el-checkbox label="选项B"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { items: [] },
      rules: {
        items: [{ type: 'array', required: true, message: '请至少选择一项', trigger: 'change' }]
      }
    }
  }
}
</script>

动态渲染选项

结合 v-for 动态生成复选框选项。

<el-checkbox-group v-model="selectedItems">
  <el-checkbox v-for="item in dynamicOptions" :label="item.value" :key="item.id">
    {{ item.label }}
  </el-checkbox>
</el-checkbox-group>

elementui checkbox