RT,在提交表单的时候,通常前端会做一个非空校验,必填为空的话直接前端拦截掉,代码如下
<template>
<div>
<el-input placeholder="姓名" v-model="form.name" clearable
style="max-width: 220px;">
</el-input>
<el-input placeholder="年龄" v-model="form.age" clearable
style="max-width: 220px;">
</el-input>
<el-input placeholder="性别" v-model="form.sex" clearable
style="max-width: 220px;">
</el-input>
</div>
<button @click='submit'>提交</button>
</template>
<script>
export default {
data(){
return {
form:{
name: '',
age: '',
sex: '',
}
}
}
method:{
checkData(){
for (let key in this.form){
if (!this.form[key]){
let text = '';
switch (key) {
case 'name':
text = '姓名';
break;
case 'age':
text = '年龄';
break;
case 'sex':
text = '性别';
break;
}
this.$message.error(`请输入${text}`);
return true;
}
}
},
submit(){
let bool = this.checkData();
if(bool)return;
}
}
}
</script>