ant-design-vue 如何使用多选框

Ant Design Vue 中的多选框组件通常使用 `a-checkbox-group` 组件来实现。以下是基本步骤：

1. 首先，在你的 Vue 文件中，通过 Vue CLI 的插件 `@antv/vue` 或直接引入 Ant Design Vue 的 CSS 和 JS 资源。

<template>
  <a-checkbox-group v-model="selectedOptions">
    <a-checkbox :value="item.value" v-for="(item, index) in options" :key="index">{{ item.label }}</a-checkbox>
  </a-checkbox-group>
</template>

<script>
import { CheckboxGroup } from '@antv/vue';

export default {
  components: {
    CheckboxGroup,
  },
  data() {
    return {
      selectedOptions: [], // 存储用户选择的值
      options: [
        { value: 'option1', label: '选项一' },
        { value: 'option2', label: '选项二' },
        { value: 'option3', label: '选项三' },
      ],
    };
  },
};
</script>

2. `v-model` 绑定到数据对象的 `selectedOptions` 数组，当用户勾选或取消勾选多选框时，这个数组会自动更新。

3. `v-for` 循环遍历 `options` 数据，为每个选项创建一个 `a-checkbox`，`:value` 属性绑定到选项的值，`:label` 显示选项的文本。

4. 使用 `CheckboxGroup` 可以处理选中的状态管理和变化事件，它内部会处理用户交互并触发相应的钩子函数。