在 el-checkbox-group (opens new window) 基础功能上扩展，不仅支持 el-checkbox-group 的所有功能，增加了全选等

基本使用

• options：复选框选项数据，当存在插槽时，该属性不生效

编辑JSON

上海 北京 广州 深圳

<template>
    <yb-codemirror-json v-model="valueString"></yb-codemirror-json>
    <yb-checkbox-group v-model="value">
        <el-checkbox v-for="city in cities" :label="city" :key="city">
            {{ city }}
        </el-checkbox>
    </yb-checkbox-group>
    <el-divider content-position="left"> </el-divider>
    <yb-checkbox-group v-model="value" :options="cities" type="button">
    </yb-checkbox-group>
</template>
<script>
    export default {
        data() {
            return {
                cities: ['上海', '北京', '广州', '深圳'],
                value: [],
            };
        },
        computed: {
            valueString() {
                return JSON.stringify(this.value);
            },
        },
    };
</script>

显示 复制 复制

其他属性

new 新增属性

type

text button

isShowSelectAll

el-checkbox-group 属性

disabled

border

max

以下属性 type 为 button 时生效

size

medium small mini

fill

hex

r

g

b

textColor

hex

r

g

b

<template>
    <el-row :gutter="20">
        <el-col :span="10">
            <el-divider content-position="left">
                <el-tag type="danger">new</el-tag> 新增属性
            </el-divider>
            <div style="margin-bottom:20px">
                type
                <el-radio-group v-model="otherProps['type']" size="mini">
                    <el-radio-button label="text">text</el-radio-button>
                    <el-radio-button label="button">button</el-radio-button>
                </el-radio-group>
            </div>
            <div style="margin-bottom:20px">
                isShowSelectAll
                <el-switch v-model="otherProps['isShowSelectAll']"></el-switch>
            </div>
            <el-divider content-position="left">
                el-checkbox-group 属性
            </el-divider>
            <div style="margin-bottom:20px">
                disabled
                <el-switch v-model="otherProps['disabled']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                border
                <el-switch v-model="otherProps['border']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                max
                <el-input-number
                    v-model="otherProps['max']"
                    :min="0"
                    :max="10"
                    size="mini"
                />
            </div>

            <el-divider content-position="left">
                以下属性 type 为 button 时生效
            </el-divider>
            <div style="margin-bottom:20px">
                size
                <el-radio-group v-model="otherProps['size']" size="mini">
                    <el-radio-button label="medium">medium</el-radio-button>
                    <el-radio-button label="small">small</el-radio-button>
                    <el-radio-button label="mini">mini</el-radio-button>
                </el-radio-group>
            </div>
            <div style="margin-bottom:20px;display:flex;align-items:center">
                fill
                <el-color-picker
                    v-model="otherProps['fill']"
                    size="mini"
                    style="margin-left:10px"
                >
                </el-color-picker>
            </div>
            <div style="margin-bottom:20px;display:flex;align-items:center">
                textColor
                <el-color-picker
                    v-model="otherProps['textColor']"
                    size="mini"
                    style="margin-left:10px"
                >
                </el-color-picker>
            </div>
        </el-col>
        <el-col :span="12">
            <yb-checkbox-group
                v-model="value"
                :options="options"
                v-bind="otherProps"
            />
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                value: [],
                otherProps: {
                    size: 'small',
                    type: 'text',
                    fill: '#62B0C1',
                    textColor: '#ffffff',
                    isShowSelectAll: true,
                },
                options: [
                    { value: '黄金糕', label: '黄金糕', disabled: true },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                ],
            };
        },
    };
</script>

显示 复制 复制

YbCheckboxGroup Attributes

参数	说明	类型	可选值	默认值
options	复选框选项数据，优先级低于插槽	array	--	--
isShowSelectAll	是否显示全选	boolean	--	true
type	选项样式	string	'button'/'text'	'text'
--	其他属性同 el-checkbox-group (opens new window)	--	--	--

YbCheckboxGroup Options

同el-checkbox (opens new window) 同el-checkbox-button (opens new window)

YbCheckboxGroup Events

同el-checkbox-group Events (opens new window)