Checkbox 多选框组

快速的数据化配置一个多选框组，常用于搭配数据表单。

基础使用

点击查看代码

<template>
  <div class="demo">
    <p><b>普通样式</b></p>
    <AgelCheckbox v-model="value" :options="options" :props="{ label: 'name', value: 'id' }"></AgelCheckbox>
    <p><b>按钮样式</b></p>
    <AgelCheckbox v-model="value2" :options="['optionA', 'optionB', 'optionC']" button></AgelCheckbox>
    <p><b>边框样式</b></p>
    <AgelCheckbox v-model="value2" :options="['optionA', 'optionB', 'optionC']" border></AgelCheckbox>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

const value = ref([])
const value2 = ref([])
const options = [
  { name: 'nameA', id: 1, checked: true },
  { name: 'nameB', id: 2, },
  { name: 'nameC', id: 3, disabled: true }
]

</script>

属性

属性	类型	默认值	说明
options	CheckboxProps[] | string[]	-	checkbox 配置
props	{label: string, value: string}	-	CheckboxProps 配置别名
button	boolean	-	按钮样式
border	boolean	-	边框样式
......	-	-	ElCheckboxGroup 属性

CheckboxProps

属性	类型	默认值	说明
label	string	-	标签
value	string | number | boolean	-	选中值
disabled	boolean	-	是否禁用
checked	boolean	-	是否默认选中

插槽

名称	插槽作用域	说明
default	{item,index}	自定义模板