ELement表单一键定位未通过字段位置

---

loading

vue2 方案

<el-form ref="formRef">
	<el-form-item ref="formItemRef"></el-form-item>
</el-form>

	submitForm() {
      this.$refs.formRef.validate((valid, fields) => {
        if (valid) {
          console.log('表单验证通过')
        } else {
          // 获取key
          let key = Object.keys(fields)[0]
          // 获取key在formData中的索引
          let index = Object.keys(this.formData).indexOf(key)
          // 获取formItemRef的第index个元素
          let dom = this.$refs.formItemRef[index]
          // 滚动到dom元素
          dom.$el.scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
        }
      })
    }

vue3 方案

<el-form ref="formRef">
	<!-- v-for="(value, key) in formData"  -->
	<el-form-item :ref="el => (formItemRefs[key] = el)" />
</el-form>

// el-form表单ref
const formRef = ref(null)
// el-form-item表单项ref
const formItemRefs = ref({})
// 提交按钮
const submitForm = async () => {
  try {
    // 表单验证
    let valid = await formRef.value.validate()
    valid && console.log('表单验证通过')
  } catch (fields) {
    // 获取第一个错误字段的key
    const key = Object.keys(fields)[0]
    // 获取对应的表单项ref
    const errorFormItem = formItemRefs.value[key]
    if (errorFormItem) {
      // 使用 scrollIntoView 平滑滚动到错误字段
      errorFormItem.$el.scrollIntoView({
        block: 'center',
        behavior: 'smooth'
      })
    }
  }
}