elementui el-form 默认不支持回车提交,怎么解决

2023-10-27

概念:

1.在表单的提交按钮上添加 Vue 原生属性 native-type="submit" 可以让按钮变为表单提交按钮;

2.阻止表单默认提交事件(默认是阻止),在表单上(即<el-form>标签上)添加 @submit.native.prevent 即可

3.因为el-form默认不支持表单回车提交,在表单上(即<el-form>标签上)添加@keyup.enter.native="submitForm('form')"可实现回车提交表单

template:

<el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="submitForm('form')">
	<el-form-item label="" prop="username">
	    <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" v-model="form.username" clearable></el-input>
	</el-form-item>
	<el-form-item label="" prop="password">
	    <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="form.password" show-password clearable></el-input>
	</el-form-item>
	<el-button class="button" type="primary"  @click="submitForm('form')">登录</el-button>
</el-form>

script:

methods: {
	submitForm(formName) {
		this.$refs[formName].validate((valid) => {
			if (valid) {
				// console.log(this.form);
				this.$axios.post('login', this.form).then((response) => {
				    console.log(response);
				    this.$message({
					    message: '登陆成功',
					    type: 'success'
				    });
				    localStorage.setItem('token', response.data.access_token); //本地存储token值
				    // console.log(localStorage.getItem('token'));
				    this.$router.push({
					    path: '/',
				    })
			    }).catch((error) => {
					this.$message({
						message: '账号或密码错误',
						type: 'error'
					});
				});
			} else {
				console.log('error submit!!');
				return false;
				}
		});
	},
	resetForm(formName) {
		this.$refs[formName].resetFields();
	}
},
created() {
	this.token = localStorage.getItem('token'); //在登录页面验证成功而保存的token值,进行获取
	    if (this.token) { //若this.token存在
			this.$router.push({path:'/'})
		}
	}
}

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

elementui el-form 默认不支持回车提交,怎么解决 的相关文章

随机推荐

  • redis设计与实现读书笔记-数据结构

    简单动态字符串 数据结构 SDS与C字符串的区别 C语言使用长度为N 1的字符数组来表示长度为N的字符串 并且字符数组的最后一个元素总是空字符 0 C字符串并不记录自身的长度信息 所以为了获取一个C字符串的长度 程序必须遍历整个字符串 和C
  • write(byte b[], int off, int len)与write(byte b[])

    在进行写文件的时候有时候返现 通过write byte b 方式写文件比原来的文件大一些 流程代码 public static void main String args throws Exception long t1 System cu
  • 安防摄像头已分别接入乐橙云、萤石云,如何实现私有云平台的统一管理与向上级联?

    一 背景分析 科技创新对社会发展的重要性不言而喻 对于安防行业来说 人工智能和5G等新技术的应用 已经成为推动智能安防发展的一块关键踏板 从技术维度来看 人工智能 云计算 大数据 物联网等技术在安防视频监控领域产生了较多的交汇与融合 新技术
  • 冲刺必会代码100题(1-31)

    说在前面 链表章节 22题之前 多处用到了二级指针 有些地方可以选择使用一级指针也可 题目目录 1 顺序表01 2023 08 19 1 题目描述 2 算法思想 3 代码示例 4 总结 2 顺序表02 2023 08 19 1 题目描述 2
  • matlab如何输入数值,如何将数据输入到训练的神经网络算法 - MATLAB

    这是很基本的 但我似乎无法在网上找到答案 如何将数据输入到训练的神经网络算法 MATLAB 我已经开发了使用MATLAB进行分类的神经网络 但是 我想以预期的方式向训练算法提供用于预测的新数据集 我似乎无法弄清函数myNeuralNetwo
  • protected 权限方法调用.

    在同一个包中 子类可以调用父类的protected方法 子类的对象也可以调用父类的protected 方法 在不同的包中 在子类的内部可以调用父类 超类的protected 方法 但是子类的对象无法调用父类 超类的protected方法
  • MD5 算法流程

    先通过下面的命令对 md5算法有个感性的认识 md5sum tmp 1 txt 1dc792fcaf345a07b10248a387cc2718 tmp 1 txt md5sum 从键盘输入 ctrl d 结束输入 hello world
  • Unity 运行时到处fbx-Autodesk FBX SDK for Unity

    参考链接
  • VMware 虚拟机快照、克隆、磁盘扩容

    1 快照 快照是虚拟机某个时间点上完整系统的镜像 可以在虚拟机内部通过快照文件恢复系统到之前的节点 拍摄快照 恢复快照 2 克隆 克隆是原始虚拟机全部状态的一个拷贝 是脱离原始虚拟机独立存在的 可以在宿主机或其他机器上通过克隆文件创建一个完
  • Python初级到高级调试

    Python初级到高级调试 什么是Python调试 为什么调试很重要 如何在python中执行调试 需要调试的编码错误是什么 常见的调试技术有哪些 什么是Python调试器 Python模块 参考 这篇博客通过示例介绍调试的一些基本和常见用
  • JavaWeb详讲

    JavaWeb内容 一 Servlet简介 Servlet 就是 Sun 公司开发动态 Web 的一门技术 Sun 在这些 API Application Programming Interface 应用程序接口 中提供一个接口叫做 Ser
  • 区块链 - 分布式账本技术的应用优势

    区块链技术正在改变世界各地的工业 它将组织 政府 金融机构和支付平台引入一个新的数字时代 它改变了我们周围的一切 但很多人仍然不知道区块链是什么或区块链技术如何工作 今天 我们为您具体解释什么是区块链和区块链技术的核心内容 什么是区块链 区
  • 如何写好一篇拆书稿?

    前段时间报名参加了知乎写作课 其中有一节课程 介绍如何写好拆书稿 之后不久 看到有人在知乎提问相关问题 便简单整理课程笔记 增加了一些自己的理解 作为回答 算是现学现卖吧 虽然拆书稿不是写作变现的最好渠道 但是刻意练习拆解图书内容 有助于提
  • 万字攻略全面了解selenium_selenium教程

    今天带大家一起学习下python爬虫4小分队 scrapy beautifulsoup selenium以及pyppeteer 之一的Selenium库 主要用于模拟浏览器运行 是一个用于web应用测试的工具 Selenium直接运行在浏览
  • 小程序评论回复功能

  • 超级详细!!!node.js中读写文件方法总结

    nodejs中所有与文件相关的操作都在fs模块中 而读写操作又是我们会经常用到的操作 nodejs的fs模块针对读操作为我们提供了readFile read createReadStream三个方法 针对写操作为我们提供了writeFile
  • 使用OpenSSL进行RSA加密和解密(非对称)

    1 RSA加密和解密基础概念 RSA是一种非对称加密 RSA秘钥 私钥和公钥 一对私钥和公钥就像夫妻一样是唯一的 用私钥加密后必须用对应的公钥才能解密 用公钥加密后必须用对应的私钥才能解密 加密和解密方式 公钥加密 私钥解密 私钥加密 公钥
  • 物联网Lora模块从入门到精通(七)串口通讯

    一 前言 在Lora模块的程序设计中 串口通信一定是一个极其重要且常用的通信方式 借助串口通信 我们不但可以向外传输我们获取的数据 还可以根据外部指令做出相应 同样的 在例程中 为我们提供了一个名为usart1 board c的库 帮助我们
  • Vue页面间数据传递

    Vue页面间数据传递 参考 https www cnblogs com dhui p 12926794 html 父页面
  • elementui el-form 默认不支持回车提交,怎么解决

    概念 1 在表单的提交按钮上添加 Vue 原生属性 native type submit 可以让按钮变为表单提交按钮 2 阻止表单默认提交事件 默认是阻止 在表单上 即