Appearance

Checkbox 多选框 ​

代码演示 ​

基础用法 ​

vue
<template>
  <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
</template>
<script setup>
import { ref } from 'vue';
const checked = ref(false);
</script>

全选 ​

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

vue
<template>
  <div>
    <a-checkbox
      v-model:checked="state.checkAll"
      :indeterminate="state.indeterminate"
      @change="onCheckAllChange"
    >
      Check all
    </a-checkbox>
  </div>
  <a-divider />
  <a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" />
</template>
<script setup>
import { reactive, watch } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const state = reactive({
  indeterminate: true,
  checkAll: false,
  checkedList: ['Apple', 'Orange'],
});
const onCheckAllChange = e => {
  Object.assign(state, {
    checkedList: e.target.checked ? plainOptions : [],
    indeterminate: false,
  });
};
watch(
  () => state.checkedList,
  val => {
    state.indeterminate = !!val.length && val.length < plainOptions.length;
    state.checkAll = val.length === plainOptions.length;
  },
);
</script>

受控的 checkbox ​

联动checkbox

vue
<template>
  <p :style="{ marginBottom: '20px' }">
    <a-checkbox v-model:checked="checked" :disabled="disabled">
      {{ label }}
    </a-checkbox>
  </p>
  <p>
    <a-button type="primary" size="small" @click="toggleChecked">
      {{ !checked ? 'Check' : 'Uncheck' }}
    </a-button>
    <a-button :style="{ marginLeft: '10px' }" type="primary" size="small" @click="toggleDisable">
      {{ !disabled ? 'Disable' : 'Enable' }}
    </a-button>
  </p>
</template>
<script setup>
import { computed, ref } from 'vue';
const checked = ref(false);
const disabled = ref(false);
const toggleChecked = () => {
  checked.value = !checked.value;
};
const toggleDisable = () => {
  disabled.value = !disabled.value;
};
const label = computed(() => {
  return `${checked.value ? 'Checked' : 'Unchecked'}-${disabled.value ? 'Disabled' : 'Enabled'}`;
});
</script>

不可用 ​

checkbox 不可用


vue
<template>
  <a-checkbox v-model:checked="state.checked1" disabled />
  <br />
  <a-checkbox v-model:checked="state.checked2" disabled />
</template>
<script setup>
import { reactive } from 'vue';
const state = reactive({
  checked1: false,
  checked2: true,
});
</script>

Checkbox 组 ​

方便的从数组生成 checkbox







vue
<template>
  <a-checkbox-group v-model:value="state.value1" name="checkboxgroup" :options="plainOptions" />
  <br />
  <br />
  <a-checkbox-group v-model:value="state.value2" :options="plainOptions" />
  <br />
  <br />
  <a-checkbox-group v-model:value="state.value3" :options="options" />
  <br />
  <br />
  <a-checkbox-group v-model:value="state.value4" :options="optionsWithDisabled" disabled>
    <template #label="{ label }">
      <span style="color: red">{{ label }}</span>
    </template>
  </a-checkbox-group>
</template>
<script setup>
import { reactive } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Pear',
    value: 'Pear',
  },
  {
    label: 'Orange',
    value: 'Orange',
  },
];
const optionsWithDisabled = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Pear',
    value: 'Pear',
  },
  {
    label: 'Orange',
    value: 'Orange',
    disabled: false,
  },
];
const state = reactive({
  value1: [],
  value2: ['Apple'],
  value3: ['Pear'],
  value4: ['Apple'],
});
</script>

API ​

属性 ​

Checkbox ​

参数说明类型默认值
autofocus自动获取焦点booleanfalse
checked(v-model)指定当前是否选中booleanfalse
disabled失效状态booleanfalse
indeterminate设置 indeterminate 状态，只负责样式控制booleanfalse
value与 CheckboxGroup 组合使用时的值boolean | string | number-

事件 ​

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

Checkbox Group ​

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

事件 ​

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

方法 ​

Checkbox ​

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