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>