mirror of https://github.com/ElemeFE/element
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.mdpull/12759/head
parent
2d6b5fceed
commit
ea27fb8fbf
|
@ -879,9 +879,14 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
||||||
| — | content of Form Item |
|
| — | content of Form Item |
|
||||||
| label | content of label |
|
| 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
|
### Form-Item Methods
|
||||||
|
|
||||||
| Method | Description | Parameters |
|
| Method | Description | Parameters |
|
||||||
| ---- | ---- | ---- |
|
| ---- | ---- | ---- |
|
||||||
| resetField | reset current field and remove validation result | — |
|
| resetField | reset current field and remove validation result | — |
|
||||||
| clearValidate | remove validation status of the field | -
|
| clearValidate | remove validation status of the field | - |
|
||||||
|
|
|
@ -884,6 +884,11 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
|
||||||
| — | contenido del Form Item |
|
| — | contenido del Form Item |
|
||||||
| label | contenido de la etiqueta |
|
| 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
|
### Form-Item Metodo
|
||||||
|
|
||||||
| Metodo | Descripción | Parametros |
|
| Metodo | Descripción | Parametros |
|
||||||
|
|
|
@ -867,6 +867,11 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
||||||
| — | Form Item 的内容 |
|
| — | Form Item 的内容 |
|
||||||
| label | 标签文本的内容 |
|
| label | 标签文本的内容 |
|
||||||
|
|
||||||
|
### Form-Item Scoped Slot
|
||||||
|
| name | 说明 |
|
||||||
|
|--------|--------|
|
||||||
|
| error | 自定义表单校验信息的显示方式,参数为 { error } |
|
||||||
|
|
||||||
### Form-Item Methods
|
### Form-Item Methods
|
||||||
|
|
||||||
| 方法名 | 说明 | 参数
|
| 方法名 | 说明 | 参数
|
||||||
|
|
|
@ -14,17 +14,21 @@
|
||||||
<div class="el-form-item__content" :style="contentStyle">
|
<div class="el-form-item__content" :style="contentStyle">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<transition name="el-zoom-in-top">
|
<transition name="el-zoom-in-top">
|
||||||
<div
|
<slot
|
||||||
v-if="validateState === 'error' && showMessage && form.showMessage"
|
v-if="validateState === 'error' && showMessage && form.showMessage"
|
||||||
class="el-form-item__error"
|
name="error"
|
||||||
:class="{
|
:error="validateMessage">
|
||||||
'el-form-item__error--inline': typeof inlineMessage === 'boolean'
|
<div
|
||||||
? inlineMessage
|
class="el-form-item__error"
|
||||||
: (elForm && elForm.inlineMessage || false)
|
:class="{
|
||||||
}"
|
'el-form-item__error--inline': typeof inlineMessage === 'boolean'
|
||||||
>
|
? inlineMessage
|
||||||
{{validateMessage}}
|
: (elForm && elForm.inlineMessage || false)
|
||||||
</div>
|
}"
|
||||||
|
>
|
||||||
|
{{validateMessage}}
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue