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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章