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