FormItem: using slot-scope to display validation message (#12715)

* Updated el-form-item to accept custom error message via slot

* FormItem: updated slot name in docs

* updated spanish and chinese translations

* Update form.md

* Update form.md

* Update form.md

* Update form.md

examples/docs/en-US/form.md

@@ -879,9 +879,14 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | — | content of Form Item |
 | label | content of label |
 
+### Form-Item Scoped Slot
+|      Name     | Description |
+|---------------|-------------|
+|      error    | Custom content to display validation message. The scope parameter is { error } |
+
 ### Form-Item Methods
 
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
 | resetField | reset current field and remove validation result | — |
-| clearValidate | remove validation status of the field | -
+| clearValidate | remove validation status of the field | - |

examples/docs/es/form.md

@@ -884,6 +884,11 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | —      | contenido del Form Item  |
 | label  | contenido de la etiqueta |
 
+### Form-Item Scoped Slot
+|      Name     | Description |
+|---------------|-------------|
+|      error    | Custom content to display validation message. The scope parameter is { error } |
+
 ### Form-Item Metodo
 
 | Metodo     | Descripción                              | Parametros |

examples/docs/zh-CN/form.md

@@ -867,6 +867,11 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | — | Form Item 的内容 |
 | label | 标签文本的内容 |
 
+### Form-Item Scoped Slot
+|  name  |   说明  |
+|--------|--------|
+|  error | 自定义表单校验信息的显示方式，参数为 { error } |
+
 ### Form-Item Methods
 
 | 方法名      | 说明          | 参数

packages/form/src/form-item.vue

@@ -14,17 +14,21 @@
     <div class="el-form-item__content" :style="contentStyle">
       <slot></slot>
       <transition name="el-zoom-in-top">
-        <div
-          v-if="validateState === 'error' && showMessage && form.showMessage"
-          class="el-form-item__error"
-          :class="{
-            'el-form-item__error--inline': typeof inlineMessage === 'boolean'
-              ? inlineMessage
-              : (elForm && elForm.inlineMessage || false)
-          }"
-        >
-          {{validateMessage}}
-        </div>
+        <slot 
+          v-if="validateState === 'error' && showMessage && form.showMessage" 
+          name="error" 
+          :error="validateMessage">
+          <div
+            class="el-form-item__error"
+            :class="{
+              'el-form-item__error--inline': typeof inlineMessage === 'boolean'
+                ? inlineMessage
+                : (elForm && elForm.inlineMessage || false)
+            }"
+          >
+            {{validateMessage}}
+          </div>
+        </slot>
       </transition>
     </div>
   </div>