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

概念:

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:'/'})
		}
	}
}

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值