使用onValuesChange获取ant-design-vue表单值实现输入内容实时同步更新

步骤1：给a-form绑定属性和事件 #

在你的<a-form>标签上添加表单实例绑定和valuesChange监听：

<a-form 
  :form="form"
  @valuesChange="handleValuesChange"
>
  <!-- 你原有a-col、a-form-item等表单内容保持不变 -->
</a-form>

注：ant-design-vue 1.x 版本使用v-decorator的表单必须用Form.create()包裹组件生成form实例，这一步是默认前提

步骤2：添加值变化回调方法 #

在你的组件methods中新增handleValuesChange方法，同步fullname的值到你的响应式变量：

methods: {
  handleValuesChange(changedValues, allValues) {
    // 仅当fullname字段发生变化时更新
    if (changedValues.hasOwnProperty('fullname')) {
      this.fullname = changedValues.fullname
    }
  },
  // 原有提交逻辑保持不变
  handleSubmit() {
    this.form.validateFields((err, values) => {
      if (err) return
      // 这里直接把values提交到后端即可
      console.log('待提交的全量表单数据', values)
    })
  }
}

以上配置完成后，输入框内容变化时会实时同步到你页面顶部展示的fullname变量，提交时还是统一走表单校验后拿全量数据提交，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Joshtom