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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
2018-06-01 VUE通过id从列表页跳转到相对的详情页
2017-06-01 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示