Ant Design Vue Checkbox多选框用法

Ant Design Vue Checkbox多选框的用法，比原生的选择框架漂亮使用也简单。

基础用法

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

Ant Design Vue Checkbox多选框例子

Checkbox组

//第一种方式定义数组，标题和value都一样
const options1 = ['Apple.com', 'Google.com', 'itxst.com'];
//第二种方式定义数组，lable是显示的标题，disabled为true表示禁用
const options3 = [ 
    { label: '苹果', value: 'Apple' },
    { label: '梨', value: 'Pear' },
    { label: '橙', value: 'Orange', disabled: true  },
  ];

Checkbox组完整代码

<template>
  <div style="text-align: left;padding-left: 20px; ">
    第一组<br />
    <a-checkbox-group name="checkboxgroup" :options="options1" v-model="value" @change="onChange" />
    <br />第二组默认值<br />
    <a-checkbox-group :options="options1" :defaultValue="['Apple']" @change="onChange" />
     <br />第三组全部禁用<br />
    <a-checkbox-group :options="options2"  disabled :value="['Pear']" @change="onChange" />
     <br />第四组禁用个别项目并使用插槽<br />
    <a-checkbox-group
      :options="options3"  
      :defaultValue="['Apple']"
      @change="onChange"
    >
      <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
    </a-checkbox-group>
  </div>
</template>
<script>
  const options1 = ['Apple.com', 'Google.com', 'itxst.com'];
  const options2 = [
    { label: '苹果', value: 'Apple' },
    { label: '梨', value: 'Pear' },
    { label: '橙', value: 'Orange' },
  ];
  const options3 = [ 
    { label: '苹果', value: 'Apple' },
    { label: '梨', value: 'Pear' },
    { label: '橙', value: 'Orange', disabled: true  },
  ];
  export default {
    data() {
      return {
        options1,
        options2,
        options3,
        value: [],
      };
    },
    methods: {
      onChange(checkedValues) {
        console.log('checked = ', checkedValues);
        console.log('value = ', this.value);
      },
    },
  };
</script>

在线试一试