ant-design-vue中a-radio-group

a-radio-group是ant-design-vue中的单选框组件，可以用于从一组选项中选择一个选项。

示例代码：

<template>
  <a-radio-group v-model="selectedValue">
    <a-radio :value="1">选项1</a-radio>
    <a-radio :value="2">选项2</a-radio>
    <a-radio :value="3">选项3</a-radio>
  </a-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 1
    };
  }
};
</script>

在上面的示例中，我们定义了一个a-radio-group组件，并使用v-model绑定了一个变量selectedValue，表示选中的值。然后，在组件内部定义了三个a-radio子组件，分别代表三个选项。每个a-radio组件都有一个value属性，用于表示该选项的值。当用户选择其中一个选项时，selectedValue变量的值将会更新为该选项的value值。

相关问题

ant-design-vue a-radio-group改成多选

### 修改 `a-radio-group` 实现多选功能

在 Ant Design Vue 中，默认情况下，`a-radio-group` 是用于实现单选逻辑的组件。为了将其更改为支持多选的功能，通常的做法不是直接修改 `a-radio-group` 的行为，而是采用其他更适合多选场景的组件，比如 `a-checkbox-group`。

如果确实希望保留类似的界面样式而改变其交互方式，则可以考虑自定义解决方案或寻找社区插件来满足需求。不过，在标准做法下，对于多选的需求应该使用 `a-checkbox-group` 来替代 `a-radio-group`[^2]。

下面是一个简单的例子展示如何利用 `a-checkbox-group` 完成类似的任务：

<template>
  <a-checkbox-group v-model:value="selectedValues">
    <a-checkbox :value="1">Option A</a-checkbox>
    <a-checkbox :value="2">Option B</a-checkbox>
    <a-checkbox :value="3">Option C</a-checkbox>
  </a-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [] // 初始化为空数组表示没有任何选项被选中
    };
  }
};
</script>

此代码片段展示了如何通过绑定 `v-model` 到一个数组变量上来跟踪哪些项已被勾选，并且每一项都绑定了具体的值给 `:value` 属性以确保能够正确识别各个选项。

ant-design-vue的使用a-modal做一个新增

1. 在组件中引入a-modal组件

import { Modal } from 'ant-design-vue';

2. 在data中定义需要绑定的数据

data() {
  return {
    visible: false,
    formData: {
      name: '',
      age: '',
      gender: '',
    },
  }
},

3. 在template中使用a-modal组件

<a-modal
  title="新增用户"
  v-model:visible="visible"
  @ok="handleOk"
  @cancel="handleCancel"
>
  <a-form :model="formData">
    <a-form-item label="姓名">
      <a-input v-model:value="formData.name" />
    </a-form-item>
    <a-form-item label="年龄">
      <a-input v-model:value="formData.age" />
    </a-form-item>
    <a-form-item label="性别">
      <a-radio-group v-model:value="formData.gender">
        <a-radio value="male">男</a-radio>
        <a-radio value="female">女</a-radio>
      </a-radio-group>
    </a-form-item>
  </a-form>
</a-modal>

4. 定义方法

methods: {
  handleOk() {
    // 处理保存逻辑
    this.visible = false;
  },
  handleCancel() {
    // 取消新增
    this.visible = false;
  },
  add() {
    // 打开新增弹窗
    this.visible = true;
  },
},

完整代码示例：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource">
      <a slot="title">
        <a-button type="primary" @click="add">新增</a-button>
      </a>
    </a-table>
    <a-modal
      title="新增用户"
      v-model:visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :model="formData">
        <a-form-item label="姓名">
          <a-input v-model:value="formData.name" />
        </a-form-item>
        <a-form-item label="年龄">
          <a-input v-model:value="formData.age" />
        </a-form-item>
        <a-form-item label="性别">
          <a-radio-group v-model:value="formData.gender">
            <a-radio value="male">男</a-radio>
            <a-radio value="female">女</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue';

export default {
  name: 'UserList',
  components: {
    Modal,
  },
  data() {
    return {
      visible: false,
      formData: {
        name: '',
        age: '',
        gender: '',
      },
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
        {
          title: '性别',
          dataIndex: 'gender',
        },
      ],
      dataSource: [
        {
          name: '张三',
          age: 18,
          gender: 'male',
        },
        {
          name: '李四',
          age: 20,
          gender: 'female',
        },
      ],
    };
  },
  methods: {
    handleOk() {
      // 处理保存逻辑
      this.dataSource.push(this.formData);
      this.visible = false;
    },
    handleCancel() {
      // 取消新增
      this.visible = false;
    },
    add() {
      // 打开新增弹窗
      this.visible = true;
    },
  },
};
</script>