perf: 表单自动滚动到校验出错位置

src/components/DataForm/index.vue

@@ -23,6 +23,7 @@
 
 <script>
 import ElFormRender from './components/el-form-renderer'
+import { scrollToError } from '@/utils'
 export default {
   components: {
     ElFormRender
@@ -76,6 +77,7 @@ export default {
           this.$emit('submit', form.getFormValue(), form, addContinue)
         } else {
           this.$emit('invalid', valid)
+          scrollToError(form.$el)
           return false
         }
       })

src/utils/index.js

@@ -110,3 +110,24 @@ export function param2Obj(url) {
 export function getDateTimeStamp(dateStr) {
   return Date.parse(dateStr.replace(/-/gi, '/'))
 }
+
+/**
+  * 自动滚动到错误位置
+  * @param {*} el 目标元素
+  * @param {Object} 滚动参数 scrollOption={
+  *   behavior: 'smooth',
+  *   block: 'center'
+  * }
+*/
+export const scrollToError = (
+  el,
+  scrollOption = {
+    behavior: 'smooth',
+    block: 'center'
+  }
+) => {
+  setTimeout(() => {
+    const isError = el.getElementsByClassName('is-error')
+    isError[0].scrollIntoView(scrollOption)
+  }, 0)
+}