菜园前端

Appearance

Checkbox 多选框 ​

在一组选项中进行多选

按需引入方式 ​

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

javascript
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)
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 按钮后的介绍。

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

<script>
export default {
    data() {
        return {
            checked: true
        }
    }
}
</script>
<template>
    <el-checkbox v-model="checked">选项 A</el-checkbox>
</template>

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

禁用状态 ​

多选框不可用状态。

vue
<template>
    <el-checkbox disabled 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>

多选框组 ​

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

vue
<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>
<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
labelCheckbox 的 valuestring | number | boolean
disabled是否禁用booleanfalse
...