Checkbox多选框

多选框

何时使用

• 在一组可选项中进行多项选择时；

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

  代码演示

Checkbox

基本用法

简单的checkbox

<template>
  <a-checkbox @change="onChange">
    Checkbox
  </a-checkbox>
</template>
<script>
export default {
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
  },
};
</script>

不可用

checkbox 不可用

<template>
  <div>
    <a-checkbox :default-checked="false" disabled />
    <br />
    <a-checkbox default-checked disabled />
  </div>
</template>

Checkbox组

方便的从数组生成checkbox

<template>
  <div>
    <a-checkbox-group
      v-model="value"
      name="checkboxgroup"
      :options="plainOptions"
      @change="onChange"
    />
    <br />
    <a-checkbox-group :options="plainOptions" :default-value="['Apple']" @change="onChange" />
    <br />
    <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
    <br />
    <a-checkbox-group
      :options="optionsWithDisabled"
      disabled
      :default-value="['Apple']"
      @change="onChange"
    >
      <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span>
    </a-checkbox-group>
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
  { value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false },
];
export default {
  data() {
    return {
      plainOptions,
      options,
      optionsWithDisabled,
      value: [],
    };
  },
  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
  },
};
</script>

全选

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

<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
        Check all
      </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
export default {
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
  },
};
</script>

受控的checkbox

联动checkbox

<template>
  <div>
    <p :style="{ marginBottom: '20px' }">
      <a-checkbox :checked="checked" :disabled="disabled" @change="onChange">
        {{ 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>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
      disabled: false,
    };
  },
  computed: {
    label() {
      const { checked, disabled } = this;
      return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
    },
  },
  methods: {
    toggleChecked() {
      this.checked = !this.checked;
    },
    toggleDisable() {
      this.disabled = !this.disabled;
    },
    onChange(e) {
      this.checked = e.target.checked;
    },
  },
};
</script>

布局

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

<template>
  <a-checkbox-group @change="onChange">
    <a-row>
      <a-col :span="8">
        <a-checkbox value="A">
          A
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="B">
          B
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="C">
          C
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="D">
          D
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="E">
          E
        </a-checkbox>
      </a-col>
    </a-row>
  </a-checkbox-group>
</template>
<script>
export default {
  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
    },
  },
};
</script>

API

属性

Checkbox

事件

Checkbox Group

事件

方法

Checkbox