Element UI之Checkbox 多选框

Checkbox 多选框

在一组选项中进行多选

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Checkbox, CheckboxGroup } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/checkbox.css'
import 'element-ui/lib/theme-chalk/checkbox-group.css'

Vue.use(Checkbox)
Vue.use(CheckboxGroup)

基础使用

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

<template>
    <el-checkbox v-model="checked">选项 A</el-checkbox>
</template>

<script>
export default {
    data() {
        return {
            checked: true
        }
    }
}
</script>

禁用状态

多选框不可用状态。

<template>
    <el-checkbox disabled v-model="checked">选项 A</el-checkbox>
</template>

<script>
export default {
    data() {
        return {
            checked: true
        }
    }
}
</script>

多选框组

适用于将多个选项的值存在一个数组中的场景。

<template>
    <el-checkbox-group v-model="checked">
        <el-checkbox label="选项 A"></el-checkbox>
        <el-checkbox label="选项 B"></el-checkbox>
    </el-checkbox-group>
</template>

<script>
export default {
    data() {
        return {
            checked: ['选项 A']
        }
    }
}
</script>

Checkbox Attributes

参数	说明	类型	默认值
v-model	绑定值	string | number | boolean
label	Checkbox 的 value	string | number | boolean
disabled	是否禁用	boolean	false
...

原文链接：菜园前端