Checkbox多选框

多选框

何时使用

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

    代码演示

Checkbox

基本用法

简单的checkbox

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

Checkbox多选框 - 图1

不可用

checkbox 不可用

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

Checkbox多选框 - 图2

Checkbox组

方便的从数组生成checkbox

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

Checkbox多选框 - 图3

全选

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

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

Checkbox多选框 - 图4

受控的checkbox

联动checkbox

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

Checkbox多选框 - 图5

布局

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

  1. <template>
  2. <a-checkbox-group @change="onChange">
  3. <a-row>
  4. <a-col :span="8">
  5. <a-checkbox value="A">
  6. A
  7. </a-checkbox>
  8. </a-col>
  9. <a-col :span="8">
  10. <a-checkbox value="B">
  11. B
  12. </a-checkbox>
  13. </a-col>
  14. <a-col :span="8">
  15. <a-checkbox value="C">
  16. C
  17. </a-checkbox>
  18. </a-col>
  19. <a-col :span="8">
  20. <a-checkbox value="D">
  21. D
  22. </a-checkbox>
  23. </a-col>
  24. <a-col :span="8">
  25. <a-checkbox value="E">
  26. E
  27. </a-checkbox>
  28. </a-col>
  29. </a-row>
  30. </a-checkbox-group>
  31. </template>
  32. <script>
  33. export default {
  34. methods: {
  35. onChange(checkedValues) {
  36. console.log('checked = ', checkedValues);
  37. },
  38. },
  39. };
  40. </script>

API

属性

Checkbox

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

事件

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

Checkbox Group

参数说明类型默认值版本
defaultValue默认选中的选项string[][]
disabled整组失效booleanfalse
nameCheckboxGroup 下所有 input[type=”checkbox”]name 属性string-1.5.0
options指定可选项,可以通过 slot=”label” slot-scope=”option” 定制labelstring[] | Array<{ label: string value: string disabled?: boolean, indeterminate?: boolean, onChange?: function }>[]
value指定选中的选项string[][]

事件

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

方法

Checkbox

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