关于element Form表单的下拉框出现自动校验
Form表单的校验一定要遵循文档的要求,不然就会出现自动校验或校验状态取消不了这种情况
<el-form ref="Form" :model="Form" :rules="FormRules" label-width="100px" class="demo-ruleForm formMargin">
<el-form-item label="所属单位:" class="fw60" prop="enterpriseNum">
<el-input v-model="Form.enterpriseNum" placeholder="请输入所属单位"></el- input>
</el-form-item>
<div class="line">
<el-form-item label="用户姓名:" class="fw48" prop="name" >
<el-input v-model="Form.name" placeholder="输入用户姓名"></el-input>
</el-form-item>
<el-form-item label="用户职位:" class="fw48" >
<el-input v-model="Form.position" placeholder="输入用户职位"></el-input>
</el-form-item>
</div>
<div class="line">
<el-form-item label="登录账户:" class="fw48" prop="account" >
<el-input type="text" v-model="Form.account" placeholder="请输入登录账户"></el-input>
</el-form-item>
<el-form-item label="登录密码:" class="fw48" >
<el-input type="password" v-model="Form.password" placeholder="请输入登录密码"></el-input>
</el-form-item>
</div>
<div class="line">
<el-form-item label="用户角色:" class="fw48" prop="roleNum" >
<el-select v-model="Form.roleNum" @change="roleChange" placeholder="请选择用户角色" style='width:100%;'>
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<el-form-item label="用户备注:" class="DrawerRight" >
<el-input type="textarea" :rows="5" v-model="Form.notes" placeholder="请输入备注" resize="none"></el-input>
</el-form-item>
<el-form-item class="DrawerRight" style="display: flex;justify-content: flex-end;">
<el-button class='edit_btns1' @click="submitForm('Form',3)" v-show="fl==2&&btnlist==1">保存</el-button>
<el-button class='edit_btns1' @click="submitForm('Form',2)" v-show="fl==2&&btnlist==2">添加</el-button>
<el-button type='info' plain @click="resetForm('Form')">重置</el-button>
</el-form-item>
</el-form>
在js中加入规则
data () {
return {
Form:{
"account":'',
"name":'',
"password":'',
"unit":'',
"position":'',
"roleNum":'',
"stateNum":'',
"notes":'',
"enterpriseNum":''
// "enterpriseName":''
},
//校验规则
FormRules:{
enterpriseNum:[
{ required: true, message: '请输入所属单位', trigger: 'blur' }
],
name:[
{ required: true, message: '输入用户姓名', trigger: 'blur' }
],
account:[
{ required: true, message: '请输入登录账户', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入登密码', trigger: 'blur' }
],
roleNum:[
{ required: true, message: '请选择用户角色', trigger: 'change' }
],
stateNum:[
{ required: true, message: '请选择用用户状态', trigger: 'change' }
],
},
}
},
最后。确认表单重置表单或打开表单时一定要把Form的内容置空
才能达到清除校验的效果
//打开表单
addmenu_btn(){
let _this = this
_this.$nextTick(()=>{
_this.$refs['Form'].resetFields()//重置
})
//清空Form数据
_this.Form={
"account":'',
"name":'',
"password":'',
"unit":'',
"position":'',
"roleNum":'',
"stateNum":'',
"notes":'',
"enterpriseNum":''
}
},