Checkbox 多选框

多选框。

何时使用

• 在一组可选项中进行多项选择时；
• 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

代码演示

基本用法

简单的 checkbox。

<template>
    <v-checkbox>checkbox</v-checkbox>
    <v-checkbox v-model="checkStatus" :true-value="0" :false-value="1" @change="onChange">checkbox</v-checkbox>
</template>
<script>
    export default {
        data () {
            return {
                checkStatus: 1
            }
        },
        methods: {
            onChange(value) {
                console.log("checkbox change event!!! " + value);
            }
        }
    }
</script>

受控的 Checkbox

联动 checkbox。

<template>
    <p style="margin-bottom: 16px;">
        <v-checkbox v-model="checked" :disabled="disabled" @change="onChange">
            <span v-if="!checked">取消</span>
            <span v-if="checked">选中</span>
            -
            <span v-if="!disabled">可用</span>
            <span v-if="disabled">不可用</span>
        </v-checkbox>
    </p>
    <p>
        <button type="button" class="ant-btn ant-btn-primary ant-btn-sm" @click="checked = !checked">
            <span v-if="checked">取 消</span>
            <span v-if="!checked">选 中</span>
        </button>
        <button type="button" class="ant-btn ant-btn-primary ant-btn-sm" style="margin-left: 10px;" @click="disabled = !disabled">
            <span v-if="disabled">可用</span>
            <span v-if="!disabled">不可用</span>
        </button>
    </p>
</template>
<script>
    export default {
        data() {
            return {
                checked: false,
                disabled: false
            }
        },
        methods: {
            onChange(value) {
                console.log("checkbox change event!!! " + value);
            }
        }
    }
</script>

不可用

checkbox 不可用。

<template>
    <v-checkbox disabled>checkbox</v-checkbox>
    <v-checkbox :value="true" disabled>checkbox</v-checkbox>
</template>

checkbox 组

方便的从数组生成 Checkbox 组。

<template>
    <div>
        <p style="margin-bottom: 16px;">
            <v-checkbox-group :data="options" v-model="arrayValue" @change="checkGroup" :max="2"></v-checkbox-group>
        </p>
        <p style="margin-bottom: 16px;">
            <v-checkbox-group @change="checkGroup">
                <v-checkbox v-for="item in optionsWithDisabled" :true-value="item.value" :disabled="item.disabled" :key="item.value">{{item.text}}</v-checkbox>
            </v-checkbox-group>
        </p>
        <p style="margin-bottom: 16px;">
            <v-checkbox-group disabled>
                <v-checkbox v-for="item in options" :true-value="item.value" :key="item.value">{{item.label}}</v-checkbox>
            </v-checkbox-group>
        </p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                arrayValue: [],
                options: [
                    {label: '苹果', value: 'Apple'},
                    {label: '梨', value: 'Pear'},
                    {label: '橘', value: 'Orange'},
                ],
                optionsWithDisabled: [
                    {text: '苹果', value: 'Apple'},
                    {text: '梨', value: 'Pear'},
                    {text: '橘', value: 'Orange', disabled: true},
                ]
            }
        },
        methods: {
            checkGroup(values) {
                console.log("checkboxGroup change event!!! ");
                console.log(values);
            }
        }
    }
</script>

全选

在实现全选效果时，你可能会用到 indeterminate 属性。

<template>
    <div>
        <p>
            <v-checkbox :indeterminate="indeterminate" v-model="allChecked" @click="checkAll">全选</v-checkbox>
        </p>
        <p style="margin-bottom: 16px;">
            <v-checkbox-group :data="options" v-model="fruits" @change="setState"></v-checkbox-group>
        </p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                indeterminate: true,
                allChecked: false,
                fruits: ['Apple', 'Orange'],
                options: [
                    {label: '苹果', value: 'Apple'},
                    {label: '梨', value: 'Pear'},
                    {label: '橘', value: 'Orange'},
                ],
                allFruits: ['Apple', 'Pear', 'Orange']
            }
        },
        methods: {
            checkAll() {
                if (this.fruits.length == this.options.length) {
                    this.fruits = [];
                    this.allChecked = false;
                    this.indeterminate = false;
                } else {
                    this.fruits = JSON.parse(JSON.stringify(this.allFruits));
                    this.allChecked = true;
                    this.indeterminate = false;
                }
            },
            setState() {
                this.indeterminate =  this.fruits.length > 0 && this.fruits.length < this.options.length;
                this.allChecked = this.fruits.length == this.options.length;
            }
        }
    }
</script>

API

Checkbox Props

Checkbox Group Props

Data Props

Checkbox Events

Checkbox Group Events