K先生个人博客

当前位置:首页 > 爱技术 > 正文

vue3中使用element-plus表格验证遇到的坑

最近用element-plus写自己的alone-admin后台管理系统的时候,遇到了一些坑,,,也可能是因为自己比较菜,毕竟自己其实是一枚后端程序员,,, 

其实如果直接复制element-plus官网上的写法也没什么问题,但是官网的是ts写法,奈何自己对ts的了解并不多,所以并不想直接复制,,,而后就是不断踩坑了,经过不断的努力终于成功了。

59851b21ee6f743f81dc62fd0a47855.png

下面代码很简单,就是一个登录验证表单实例:

<template>
	<div class="login">
		<p>alone-admin管理系统</p>
		<el-form ref="loginFormRef" :model="loginForm" :rules="rules">
			<el-form-item label="账号" prop="username">
				<el-input v-model="loginForm.username" />
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="loginForm.password" />
			</el-form-item>
			<el-button @click="submitForm">登录</el-button>
		</el-form>
	</div>
</template>

<script>
	import {reactive,ref} from 'vue'
	export default{
		setup() {
			const loginForm = reactive({
				username:'',
				password:''
			})
			const rules = reactive({
				username:[
					{
						required:true,
						message:'请输入账号'
					}
				],
				password:[
					{
						required:true,
						message:'请输入密码'
					}
				],
			})
			
			const loginFormRef=ref({})
			const submitForm = async()=>{
				loginFormRef.value.validate((valid)=>{
					if(valid){
						console.log('验证通过')
					}else{
						console.log('验证不通过')
					}
				})
			}
			
			return {
				loginForm,
				submitForm,
				loginFormRef,
				rules
			}
		}
	}
</script>

<style>
</style>

作者K先生本文地址http://www.gold404.cn/info/138

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表