elementUI表单验证怎么显示后台返回的错误信息

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有木有!!!!说得不对的地方望批评指正,大家一起进步~

评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值