Ant Design Vue给a-form表单赋值及获取表单数据

在 Ant Design Vue 中，可以通过 `v-model` 绑定表单元素，也可以通过 `:model` 和 `:initialValues` 属性绑定整个表单的数据。具体步骤如下：

1. 在表单中使用 `a-form-item` 组件和 `a-input`、`a-select` 等组件来定义表单元素，并使用 `v-model` 绑定表单元素的值。例如：

<a-form>
  <a-form-item label="用户名">
    <a-input v-model="formData.username" />
  </a-form-item>
  <a-form-item label="密码">
    <a-input type="password" v-model="formData.password" />
  </a-form-item>
  <a-form-item label="性别">
    <a-select v-model="formData.gender">
      <a-select-option value="male">男</a-select-option>
      <a-select-option value="female">女</a-select-option>
    </a-select>
  </a-form-item>
</a-form>

2. 在 Vue 实例中定义 `formData` 对象来存储表单数据，并在 `data` 中初始化表单数据。例如：

data() {
  return {
    formData: {
      username: '',
      password: '',
      gender: 'male'
    }
  }
}

3. 通过 `:model` 和 `:initialValues` 属性绑定整个表单的数据。例如：

<a-form :model="formData" :initialValues="formData">
  ...
</a-form>

4. 可以通过 `this.formData` 获取表单数据，也可以在表单提交时通过 `this.$refs.form.validate()` 验证表单数据。例如：

methods: {
  handleSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        console.log(this.formData); // 获取表单数据
      } else {
        console.log('表单验证失败');
      }
    });
  }
}