elementUI的表单验证使用非常方便,此处不赘述,网上的方法和官方文档都有描述。
如果后台返回的错误信息要显示在表单验证错误提示的地方,而不是另外弹出提示框或者,实现效果如下图:
这个效果要如何实现呢?网上搜索了一些别人的做法,例如:
vm.$refs.ruleForm.fields.filter((item) => (item.prop === i))[0];
不知道是什么鬼怎么用的~~我用了没有达到想要的效果,如果哪些网友知道,望告知
还有一种做法是:
this.$refs.ruleForm.fields[0].error="错误提示"
这个是可以起作用的,但是控制窗口会有如下警告:
webpack-internal:///./node_modules/vue/dist/vue.esm.js:592 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "error"
found in
---> <ElFormItem>
<ElForm>
<ElDialog>
<DeptManageTab> at src\modules\settings\userManage\DeptManageTab.vue
<TabPane>
<Tabs>
……
<AppContainer> at src\containers\AppContainer.vue
<App> at src\App.vue
<Root>
提示error属性的使用方法有误,避免直接更改一个属性的值,因为父组件重新加载时,该值会被覆盖,可以在data或者computed中定义一个变量来替代。
form-item里有个error的属性,刚用elementUI的童鞋可能很容易忽略
要实现在表单验证的地方显示后来返回的错误,加上error的属性,在data中定义一个错误信息的变量errorMsg,修改变量即可
<el-form :model="depForm" ref="depForm" :rules="depFormRules">
<el-form-item label="部门名称" label-width="25%" prop="name" :error="errorMsg">
<el-input v-model="depForm.name" auto-complete="off" clearable />
</el-form-item>
</el-form>
post(Url,params, function (result) {
if (result.data.success) {
//成功时操作
} else {
// 后台返回的错误信息赋值给变量errorMsg
self.errorMsg = result.data.message
}
})
然后你会发现只有第一次出错时才有提示,后续一样的错误不会有验证失败的提示,在下猜测可能是errorMsg修改成一样的值,vue没触发响应
在请求前将错误信息置空即可
self.errorMsg = ''
post(Url,params, function (result) {
if (result.data.success) {
//成功时操作
} else {
// 后台返回的错误信息赋值给变量errorMsg
self.errorMsg = result.data.message
}
})
So easy有木有!!!!说得不对的地方望批评指正,大家一起进步~