Checkbox 多选框

avue-checkbox：数组，每项与 dic.value 类型一致。Form 中使用 type: checkbox 和 dicData。

通用属性、字典与事件见 基础组件使用约定。模板属性可写为 kebab-case，Form 配置对象使用 camelCase。

基础用法

效果预览可直接操作下方示例

独立组件通过 v-model 绑定单个字段；在 Form 中使用时，将相应配置放入 column。

正在加载示例…

<template>
  <el-row :span="24">
    <el-col :span="6">
      值:{{form}}<br />
      <el-checkbox-group v-model="form"
                         placeholder="请选择内容">
        <el-checkbox v-for="item in dic"
                     :key="item.value"
                     :label="item.value">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      值:{{form1}}<br />
      <el-checkbox-group v-model="form1"
                         placeholder="请选择内容">
        <el-checkbox v-for="item in dic"
                     :key="item.value"
                     :label="item.value">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';

const form = ref([0, 1]);
const form1 = ref([]);
const dic = [
  { label: '选项1', value: 0 },
  { label: '选项2', value: 1 }
];
</script>

属性

属性	类型	默认值	说明
dic / props	array / object	[] / 默认映射	选项与键映射
all	boolean	false	显示全选，只选未禁用项
button / border	boolean	false	按钮或边框样式
min / max	number	—	最少/最多可选项数
fill / textColor	string	—	按钮选中背景与文字颜色

字典项 disabled 禁用单项，组件 disabled 禁用全部；change 返回公共事件对象。