antdvue中form二次封装

在 Ant Design Vue 中，Form 组件是一个非常实用的表单组件，但是有时候我们需要对 Form 进行二次封装来满足特定的业务需求。

下面是一个简单的 Form 二次封装示例：

<template>
  <a-form :form="form">
    <slot></slot>
    <a-form-item>
      <a-button type="primary" @click="submitForm">提交</a-button>
      <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { Form, Button } from 'ant-design-vue';

export default {
  name: 'MyForm',
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-button': Button,
  },
  props: {
    initialValues: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
    };
  },
  methods: {
    submitForm() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('submit', values);
        }
      });
    },
    resetForm() {
      this.form.resetFields();
    },
  },
};
</script>

在这个示例中，我们通过使用 `<slot>` 来使得 MyForm 组件可以接受任意的表单项，同时在底部添加了提交和重置按钮。在代码中，我们使用了 Ant Design Vue 中的 Form、FormItem 和 Button 组件，并通过 `$form.createForm(this)` 创建了一个表单实例，然后在 `submitForm` 和 `resetForm` 方法中分别对表单进行了提交和重置操作。

使用该组件时，我们可以这样写：

<template>
  <my-form @submit="handleSubmit">
    <a-form-item label="用户名" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
      <a-input v-decorator="['username']" />
    </a-form-item>
    <a-form-item label="密码" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
      <a-input type="password" v-decorator="['password']" />
    </a-form-item>
  </my-form>
</template>

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

export default {
  components: {
    'my-form': MyForm,
  },
  methods: {
    handleSubmit(values) {
      console.log(values);
    },
  },
};
</script>

在这个示例中，我们将两个输入框放在了 MyForm 组件内部，并通过 `v-decorator` 指令来进行表单项的绑定。当用户点击提交按钮时，MyForm 组件会对表单进行验证，并将验证通过的表单数据通过 `$emit` 事件向外传递。