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 |
... |
原文链接:菜园前端