Ant Design Vue Checkbox多选框与Grid组件实现自定义布局

Ant Design Vue Checkbox多选框与Grid组件实现自定义布局,使用方法也比较简单在a-checkbox-group标签里插入Grid组件即可。

自定义布局

<template>
  <a-checkbox-group @change="onChange" style="width:300px">
    <a-row> 
      <a-col :span="6" v-for="item in options" v-bind:key="item.value">
        <a-checkbox :disabled="item.disabled" :value="item.value">{{item.label}}</a-checkbox>
        </a-col> 
    </a-row>
  </a-checkbox-group>
</template>
<script>
  const options = [  
    { label: '苹果', value: 'Apple' },
    { label: '梨X', value: 'Pear' },
    { label: '梨A', value: 'PearX' },
    { label: '橙C', value: 'Orange', disabled: true  },
  ];
  export default { 
      data() {
      return { 
        options :options
      };
    },
    methods: {
      onChange(checkedValues) {
        console.log('checked = ', checkedValues);
      },
    },
  };
</script>

Ant Design Vue Checkbox多选框自定义布局例子