ant design vue 下的a-input 使用v-decorator修改数据回显

a-input 使用v-decorator回显

不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

定义form：

<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
        <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="账户: "
              v-decorator="[
                'username',
                {initialValue:'',rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
    </a-form>
 </div>
</template>

<script>
...
export default {
  ...
  data () {
    return {
      ...
      form: this.$form.createForm(this),
    }
  },
  created () {
    
  },
  ...
}
</script>

v-decorator 取值：

this.form.validateFields((err, values) => {
  // 这里做逻辑处理
  console.log(values) // { username: '' }
})

v-decorator 赋值：

this.form.setFieldsValue({
  username: '设置值'
})

清空表单数据：

this.form.resetFields

这篇好文章是转载于：学新通技术网