feat(components): form add scrollToField method (#3110)

* feat(form): add scrollToField function

* feat(components): complete scrollToField function

Co-authored-by: linjie <linjie@zhuanzhuan.com>

packages/components/form/src/form-item.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="formItemRef"
     class="el-form-item"
     :class="formItemClass"
   >
@@ -116,6 +117,8 @@ export default defineComponent({
 
     const computedLabelWidth = ref('')
 
+    const formItemRef = ref<HTMLDivElement>()
+
     const vm = getCurrentInstance()
     const isNested = computed(() => {
       let parent = vm.parent
@@ -200,7 +203,7 @@ export default defineComponent({
       return required
     })
     const elFormItemSize = computed(() => props.size || elForm.size)
-    const sizeClass = computed(() => {
+    const sizeClass = computed<ComponentSize>(() => {
       return elFormItemSize.value || $ELEMENT.size
     })
 
@@ -327,12 +330,13 @@ export default defineComponent({
       ...toRefs(props),
       size: sizeClass,
       validateState,
+      $el: formItemRef,
+      formItemMitt,
       removeValidateEvents,
       addValidateEvents,
       resetField,
       clearValidate,
       validate,
-      formItemMitt,
       updateComputedLabelWidth,
     })
 
@@ -370,6 +374,7 @@ export default defineComponent({
     })
 
     return {
+      formItemRef,
       formItemClass,
       shouldShowError,
       elForm,

packages/components/form/src/form.vue

@@ -93,6 +93,7 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    scrollToError: Boolean,
   },
   emits: ['validate'],
   setup(props, { emit }) {
@@ -177,10 +178,12 @@ export default defineComponent({
       let valid = true
       let count = 0
       let invalidFields = {}
+      let firstInvalidFields
       for (const field of fields) {
         field.validate('', (message, field) => {
           if (message) {
             valid = false
+            firstInvalidFields || (firstInvalidFields = field)
           }
           invalidFields = { ...invalidFields, ...field }
           if (++count === fields.length) {
@@ -188,6 +191,9 @@ export default defineComponent({
           }
         })
       }
+      if (!valid && props.scrollToError) {
+        scrollToField(Object.keys(firstInvalidFields)[0])
+      }
       return promise
     }
 
@@ -204,6 +210,14 @@ export default defineComponent({
       })
     }
 
+    const scrollToField = (prop: string) => {
+      fields.forEach(item => {
+        if (item.prop === prop) {
+          item.$el.scrollIntoView()
+        }
+      })
+    }
+
     const elForm = reactive({
       formMitt,
       ...toRefs(props),
@@ -221,6 +235,7 @@ export default defineComponent({
       resetFields,
       clearValidate,
       validateField,
+      scrollToField,
     }
   },
 })

packages/tokens/form.ts

@@ -34,6 +34,7 @@ export interface ElFormItemContext {
   formItemMitt: Emitter
   size?: ComponentSize
   validateState: string
+  $el: HTMLDivElement
   validate(trigger: string, callback?: ValidateFieldCallback): void
   updateComputedLabelWidth(width: number): void
   addValidateEvents(): void