vue antd2.×表单检验如果跳转到未检验通过的地方

Antd 2.x 在 Vue 中的表单验证和 React 中类似，可以通过 `Form` 组件的 `validateFields` 方法来触发校验，校验未通过时，可以通过 `getFieldError` 方法获取错误信息，并将焦点设置到出错的表单控件上。以下是示例代码：

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="Username" :colon="false" :validateStatus="getFieldError('username') ? 'error' : ''" :help="getFieldError('username')">
      <a-input v-decorator="['username', { rules: [{ required: true, message: 'Please input your username!' }] }]" />
    </a-form-item>

    <a-form-item label="Password" :colon="false" :validateStatus="getFieldError('password') ? 'error' : ''" :help="getFieldError('password')">
      <a-input-password v-decorator="['password', { rules: [{ required: true, message: 'Please input your password!' }] }]" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" @click="handleClick">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { FormModel, Input, Button, Alert } from 'ant-design-vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    'a-form': FormModel,
    'a-form-item': FormModel.Item,
    'a-input': Input,
    'a-input-password': Input.Password,
    'a-button': Button,
    'a-alert': Alert,
  },
  data() {
    return {
      form: null,
    };
  },
  mounted() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleClick() {
      this.form.validateFields().catch(() => {
        const errorFields = this.form.getFieldsError();
        const firstErrorField = errorFields.find((item) => item.errors.length);
        if (firstErrorField) {
          const control = this.form.getFieldInstance(firstErrorField.name);
          control.focus();
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    getFieldError(name) {
      const fieldError = this.form.getFieldError(name);
      if (fieldError) {
        return fieldError[0];
      }
      return '';
    },
  },
});
</script>

在模板中，我们使用 `getFieldError` 方法获取每个表单控件的错误信息，并根据错误信息设置相应的 `validateStatus` 和 `help` 属性。

在方法中，我们首先使用 `this.$form.createForm(this)` 创建一个表单实例。然后，我们在 `handleClick` 方法中使用 `form.validateFields()` 方法触发表单校验。如果校验未通过，这个方法会返回一个 Promise，我们可以通过 `.catch()` 方法捕获校验错误。

在错误处理中，我们首先使用 `form.getFieldsError()` 方法获取所有的表单控件的错误信息。然后，我们使用 `Array.find()` 方法找到第一个存在错误信息的表单控件，然后使用 `form.getFieldInstance()` 方法获取这个表单控件的实例。最后，我们使用 `control.focus()` 方法将焦点设置到这个表单控件上，从而达到跳转到未检验通过的地方的目的。