组件-Element---Checkbox（多选框）

最新推荐文章于 2025-06-28 14:45:55 发布

ForeverJPB.

最新推荐文章于 2025-06-28 14:45:55 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：组件---Element 文章标签： Element

本文链接：https://blog.youkuaiyun.com/GU_AO_SHI_TAI_DU/article/details/94469410

本文详细介绍了Element UI中的Checkbox组件，包括基础用法、禁用状态、多选框组、indeterminate状态、可选项目数量限制以及按钮样式的应用，同时还提到了带有边框的Checkbox样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件-Element—Checkbox（多选框）

组件—多选框

基础用法

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

禁用状态

<template>
  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked1: false,
        checked2: true
      };
    }
  };
</script>

多选框组

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox