浅谈Vue+Ant Design form表单的一些坑

前言

在Vue结合Ant Design使用form表单时，可能会遇到一些坑。本攻略将会详细讲解如何解决这些坑，并提供一些示例说明。

Ant Design form表单-基本使用

首先，在使用Ant Design form表单时，我们需要先安装Ant Design of Vue。安装命令如下：

npm install ant-design-vue --save

安装完成后，在main.js中引入并注册Ant Design of Vue：

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

然后，我们就可以在Vue组件中使用Ant Design form表单了。以下是一个简单的示例代码：

<template>
  <a-form :form="form" @submit.prevent.native="handleSubmit">
    <a-form-item label="Username">
      <a-input v-decorator="['username']"/>
    </a-form-item>
    <a-form-item label="Password">
      <a-input type="password" v-decorator="['password']"/>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleSubmit() {
      this.form.validateFields((errors, values) => {
        if (errors) {
          console.log('Errors in form:', errors)
          return
        }
        console.log('Submit form:', values)
      })
    }
  }
}
</script>

在上面的示例代码中，我们使用了Ant Design of Vue中的form表单来收集用户信息。通过v-decorator指令，我们创建了两个字段：username和password。在handleSubmit方法中，我们调用了form实例的validateFields方法，对表单进行校验，并在校验通过时输出提交的表单数据。

坑1：form表单和子组件的传值

在实际开发中，我们通常不会直接使用Ant Design form表单中的a-input组件，而是使用自己封装的表单组件。这时，在子组件中如何与父组件中的form表单进行传值呢？

首先，我们需要在父组件中定义一个formData对象，用于保存表单信息。然后，在子组件中通过prop接收父组件中传过来的formData，并在子组件内部对formData进行修改。最后，在父组件中通过watch监听formData的变化，并将最新的formData保存到form实例中。

以下是一个示例代码：

在父组件中：

<template>
  <my-form :form-data="formData" :form="form"></my-form>
</template>

<script>
import MyForm from './MyForm.vue'

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      formData: {
        username: '',
        password: ''
      }
    }
  },
  watch: {
    formData: {
      handler: function (newVal) {
        this.form.setFieldsValue(newVal)
      },
      deep: true
    }
  },
  components: {
    MyForm
  }
}
</script>

在子组件中：

<template>
  <a-form-item label="Username">
    <a-input v-decorator="['username']" :value="formData.username" @input="handleUsernameChange"/>
  </a-form-item>
  <a-form-item label="Password">
    <a-input type="password" v-decorator="['password']" :value="formData.password" @input="handlePasswordChange"/>
  </a-form-item>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleUsernameChange (event) {
      this.formData.username = event.target.value
    },
    handlePasswordChange (event) {
      this.formData.password = event.target.value
    }
  }
}
</script>

在上面的示例代码中，我们在父组件中定义了一个formData对象，并在子组件中通过prop接收。在子组件内部，在输入框的@input事件中，我们修改formData对象，并通过:value绑定到输入框中，使其显示最新的输入内容。

然后，在父组件中通过watch监听formData的变化。当formData变化时，我们调用form实例的setFieldsValue方法，将最新的formData传到form表单中，从而达到更新form表单数据的目的。

坑2：无法设置初始值

在Ant Design form表单中，我们无法通过v-model来设置初始值。那么，该如何设置初始值呢？

我们可以通过form实例的setFieldsValue方法来设置初始值。以下是一个示例代码：

<template>
  <a-form :form="form">
    <a-form-item label="Username">
      <a-input v-decorator="[ 'username' ]"/>
    </a-form-item>
    <a-form-item label="Password">
      <a-input type="password" v-decorator="[ 'password' ]"/>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="setInitialValues">Set Initial Values</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    setInitialValues() {
      this.form.setFieldsValue({
        username: 'admin',
        password: '123456'
      })
    }
  }
}
</script>

在上面的示例代码中，我们通过form实例的setFieldsValue方法来设置初始值。在点击“Set Initial Values”按钮后，我们将username和password字段的值设置为“admin”和“123456”。