使用vue结合View Design写一个表单

很高兴为您提供以下示例代码：

template：

<template>
  <div class="form-container">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="名称">
        <a-input v-decorator="['name']" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input v-decorator="['email']" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input v-decorator="['password']" placeholder="请输入密码" type="password" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

script：

<script>
import { Form, Input, Button } from "view-design";
import "view-design/dist/styles/iview.css";

export default {
  name: "FormDemo",
  components: {
    AForm: Form,
    AInput: Input,
    AButton: Button,
  },
  data() {
    return {
      form: this.$form.createForm(this),
    };
  },
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
  },
};
</script>

在这个例子中，我们使用了View Design的表单组件，并将表单项包装在a-form-item中。每个表单项都有一个标签和相应的输入控件（a-input）。我们还使用了Vue的v-decorator指定了每个表单项的字段名。

在handleSubmit方法中，我们使用this.form.validateFields来验证表单并获取表单值。如果表单验证通过，我们将打印表单值。