Checkbox多选框

多选框

何时使用

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

代码演示

Checkbox多选框 - 图1

基本用法

简单的checkbox

  1. <template>
  2. <a-checkbox @change="onChange">Checkbox</a-checkbox>
  3. </template>
  4. <script>
  5. export default {
  6. methods: {
  7. onChange (e) {
  8. console.log(`checked = ${e.target.checked}`)
  9. },
  10. },
  11. }
  12. </script>

Checkbox多选框 - 图2

全选

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

  1. <template>
  2. <div>
  3. <div :style="{ borderBottom: '1px solid #E9E9E9' }">
  4. <a-checkbox
  5. :indeterminate="indeterminate"
  6. @change="onCheckAllChange"
  7. :checked="checkAll"
  8. >
  9. Check all
  10. </a-checkbox>
  11. </div>
  12. <br />
  13. <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" />
  14. </div>
  15. </template>
  16. <script>
  17. const plainOptions = ['Apple', 'Pear', 'Orange']
  18. const defaultCheckedList = ['Apple', 'Orange']
  19. export default {
  20. data () {
  21. return {
  22. checkedList: defaultCheckedList,
  23. indeterminate: true,
  24. checkAll: false,
  25. plainOptions,
  26. }
  27. },
  28. methods: {
  29. onChange (checkedList) {
  30. this.indeterminate = !!checkedList.length && (checkedList.length < plainOptions.length)
  31. this.checkAll = checkedList.length === plainOptions.length
  32. },
  33. onCheckAllChange (e) {
  34. Object.assign(this, {
  35. checkedList: e.target.checked ? plainOptions : [],
  36. indeterminate: false,
  37. checkAll: e.target.checked,
  38. })
  39. },
  40. },
  41. }
  42. </script>

Checkbox多选框 - 图3

不可用

checkbox 不可用

  1. <template>
  2. <div>
  3. <a-checkbox :defaultChecked="false" disabled />
  4. <br />
  5. <a-checkbox defaultChecked disabled />
  6. </div>
  7. </template>

Checkbox多选框 - 图4

受控的checkbox

联动checkbox

  1. <template>
  2. <div>
  3. <p :style="{ marginBottom: '20px' }">
  4. <a-checkbox
  5. :checked="checked"
  6. :disabled="disabled"
  7. @change="onChange"
  8. >
  9. {{label}}
  10. </a-checkbox>
  11. </p>
  12. <p>
  13. <a-button
  14. type="primary"
  15. size="small"
  16. @click="toggleChecked"
  17. >
  18. {{!checked ? 'Check' : 'Uncheck'}}
  19. </a-button>
  20. <a-button
  21. :style="{ marginLeft: '10px' }"
  22. type="primary"
  23. size="small"
  24. @click="toggleDisable"
  25. >
  26. {{!disabled ? 'Disable' : 'Enable'}}
  27. </a-button>
  28. </p>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. data () {
  34. return {
  35. checked: true,
  36. disabled: false,
  37. }
  38. },
  39. computed: {
  40. label () {
  41. const { checked, disabled } = this
  42. return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`
  43. },
  44. },
  45. methods: {
  46. toggleChecked () {
  47. this.checked = !this.checked
  48. },
  49. toggleDisable () {
  50. this.disabled = !this.disabled
  51. },
  52. onChange (e) {
  53. this.checked = e.target.checked
  54. },
  55. },
  56. }
  57. </script>

Checkbox多选框 - 图5

Checkbox组

方便的从数组生成checkbox

  1. <template>
  2. <div>
  3. <a-checkbox-group :options="plainOptions" v-model="value" @change="onChange" />
  4. <br />
  5. <a-checkbox-group :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
  6. <br />
  7. <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
  8. <br />
  9. <a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange">
  10. <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
  11. </a-checkbox-group>
  12. </div>
  13. </template>
  14. <script>
  15. const plainOptions = ['Apple', 'Pear', 'Orange']
  16. const options = [
  17. { label: 'Apple', value: 'Apple' },
  18. { label: 'Pear', value: 'Pear' },
  19. { label: 'Orange', value: 'Orange' },
  20. ]
  21. const optionsWithDisabled = [
  22. { value: 'Apple' },
  23. { label: 'Pear', value: 'Pear' },
  24. { label: 'Orange', value: 'Orange', disabled: false },
  25. ]
  26. export default {
  27. data () {
  28. return {
  29. plainOptions,
  30. options,
  31. optionsWithDisabled,
  32. value: [],
  33. }
  34. },
  35. methods: {
  36. onChange (checkedValues) {
  37. console.log('checked = ', checkedValues)
  38. console.log('value = ', this.value)
  39. },
  40. },
  41. }
  42. </script>

Checkbox多选框 - 图6

布局

Checkbox.Group内嵌Checkbox并与Grid组件一起使用,可以实现灵活的布局

  1. <template>
  2. <a-checkbox-group @change="onChange">
  3. <a-row>
  4. <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
  5. <a-col :span="8"><a-checkbox value="B">B</a-checkbox></a-col>
  6. <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
  7. <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
  8. <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
  9. </a-row>
  10. </a-checkbox-group>
  11. </template>
  12. <script>
  13. export default {
  14. methods: {
  15. onChange (checkedValues) {
  16. console.log('checked = ', checkedValues)
  17. },
  18. },
  19. }
  20. </script>

API

属性

Checkbox

参数说明类型默认值
autoFocus自动获取焦点booleanfalse
checked指定当前是否选中booleanfalse
defaultChecked初始是否选中booleanfalse
disabled失效状态booleanfalse
indeterminate设置 indeterminate 状态,只负责样式控制booleanfalse

事件

事件名称说明回调参数
change变化时回调函数Function(e:Event)

Checkbox Group

参数说明类型默认值
defaultValue默认选中的选项string[][]
disabled整组失效booleanfalse
options指定可选项,可以通过 slot="label" slot-scope="option" 定制labelstring[] | Array<{ label: string value: string disabled?: boolean, onChange?: function }>[]
value指定选中的选项string[][]

事件

事件名称说明回调参数
change变化时回调函数Function(checkedValue)

方法

Checkbox

名称描述
blur()移除焦点
focus()获取焦点