Ant Design Vue Checkbox多选框组例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue Checkbox多选框组例子</title>
    <script src="//www.itxst.com/package/vue/vue.min.js"></script>
    <script src="//www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding-top: 10px
        }
    </style>
</head>
<body>
    <div id="app">
       <div style="text-align: left;padding-left: 20px; ">
    第一组<br />
    <a-checkbox-group name="checkboxgroup" :options="options1" v-model="value" @change="onChange" ></a-checkbox-group>
    <br />第二组默认值<br />
    <a-checkbox-group :options="options1" :defaultValue="['Apple']" @change="onChange"  ></a-checkbox-group>
     <br />第三组全部禁用<br />
    <a-checkbox-group :options="options2"  disabled :value="['Pear']" @change="onChange"  ></a-checkbox-group>
     <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>
    </div>
    <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  },
  ];
        var app = new Vue({
            el: '#app',
           data() {
      return {
        options1,
        options2,
        options3,
        value: [],
      };
    },
    methods: {
      onChange(checkedValues) {
        console.log('checked = ', checkedValues);
        console.log('value = ', this.value);
      },
    },
        });
    </script>
</body>
</html>