使用elementui写个form表单

在Element UI 中，构建一个表单通常使用的是 `el-form` 组件和其中的各种内置元素，如 `el-input`, `el-radio`, 和 `el-button`。下面是一个简单的例子：

<template>
  <div>
    <el-form ref="registerForm" :model="formData" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="formData.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input type="email" v-model="formData.email" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElFormItem, ElRadioGroup } from "element-ui";

export default {
  components: {
    ElFormItem,
    ElRadioGroup,
  },
  data() {
    return {
      formData: {
        username: '',
        gender: '',
        email: '',
      }
    };
  },
  methods: {
    handleSubmit() {
      console.log("表单提交", this.formData);
      // 在这里你可以调用API或者执行其他业务操作
    }
  }
};
</script>

在这个例子中，`el-form-item` 分别代表了一个表单字段，`v-model` 将表单元素的值与数据对象关联起来。当点击“提交”按钮时，`handleSubmit` 方法会被触发，你可以在这里处理表单提交后的逻辑。