首页 > 其他分享 >ant design vue 下的a-input 使用v-decorator(修改数据)回显

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

时间:2023-06-01 21:24:02浏览次数:36  
标签:username ... vue 回显 form ant input 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

标签:username,...,vue,回显,form,ant,input,decorator
From: https://www.cnblogs.com/snowhite/p/17450242.html

相关文章

  • 初识Vue
    前端的发展史#1HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看 -javascript=ECMAScript(5,6,13)+Dom+Bom#2Ajax的出现->后台发送异步请求,Re......
  • antd的upload组件的各种上传、下载操作(vue)
    作为前端小白刚刚接触上传、下载文件的操作也让我很头疼,所以利用时间记录一下方便巩固,希望能够帮到大家。我将情况分为以下几种:一、点击按钮上传单个文件//html<a-upload:action="baseUrl+'/api/uploadSingleFile'":headers="headers"......
  • SpringBoot SSM vue 在线办公系统
    SpringBootSSMvue在线办公系统系统功能登录忘记密码首页统计分析用户管理员工管理公告管理考勤管理绩效管理薪酬管理流程管理留言管理文件管理开发环境和技术开发语言:Java使用框架:SpringBoot或SSM +Mybatis+MysqlSpringBoot是一个用于构建Java应用......
  • uniapp 组件中使用页面的生命周期(vue2)
    用于直接在组件中使用onLoad,onBackPress等因为之前在写App的时候有许多弹窗,希望可以在有弹窗的时候先关闭弹窗,没有弹窗在执行返回事件,因此需要在页面onBackPress里面写很多判断,因此找了一些方法,写了可以直接在组件中调用页面生命周期的方法!使用mixinthis.$children去循环查询......
  • 通过实例了解vue3.3更新的特征
    开场白5月份,vue团队发布了vue3.3.这次小版本的发布主要解决了--Vue与TypeScript一起使用时的许多长期存在的痛点.下面我们一起来学习一下vue3.3新特征准备新新特征的环境根据官方团队的描述,我们需要准备一下工作。vue升级到3.3时,建议同时更新以下依赖项:Volar/vue......
  • 【Vue】 vue项目的目录结构
    ├──build/#Webpack配置目录├──dist/#build生成的生产环境下的项目├──config/#Vue基本配置文件,可以设置监听端口,打包输出等├──node_modules/#依赖包,通常执行npmi会生成├──src/......
  • 【Vue】的API风格_选项式API和组合式API
    API风格API风格可分选项式API和组合式API。选项是API(OptionsAPI)使用选项式API,可以用包含多个选项的对象来描述组件的逻辑,例如  data、 methods 和  mounted 。选项所定义的属性都会暴露在函数内部的this上,它会指向当前的组件实例。1<script>2exp......
  • vue xlsx组件 导出的excel表头插入内容
    主要就是sheet_add_dom这个方法,dom是带有table标签元素的dom节点。timeData是个二维数组:[["条件1","条件2"],["值1","值2"]];如果是要在表格内容行里面插入内容,可以直接在与表格绑定的对象上,插入内容就可以了。/*timeData是二维数组*/getExcelWithInfo(timeData,dom,tit......
  • vue介绍和基本使用,插值语法,文本指令和事件指令
    1前端的发展史#1HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看 -javascript=ECMAScript(5,6,13)+Dom+Bom#2Ajax的出现->后台发送异步请求......
  • vue2项目中使用dhtmlx gantt甘特图插件
    官网示例地址:https://docs.dhtmlx.com/gantt/samples/可以在这里查看绑定数据的格式安装依赖npminstalldhtmlx-gantt--save创建一个甘特图组件<template><el-scrollbarref="gantt_scrollbar"class="gantt-box"><divref="gantt"class=&qu......