Element Plus 表单封装教程：使用 Form 和 FormItem 组件创建自定义表单

"用Element Plus 封装form控件"\n要使用Element Plus封装表单控件，需要先安装Element Plus库。可以通过npm安装：\n\nbash\nnpm install element-plus --save\n\n\n然后，在需要使用表单控件的组件中，引入Element Plus的相关组件和样式：\n\njavascript\nimport { Form, FormItem, Input, Button } from 'element-plus';\nimport 'element-plus/lib/theme-chalk/index.css';\n\n\n接下来，可以封装一个自定义的Form组件，使用Element Plus的Form和FormItem组件进行布局和校验：\n\njavascript\n<template>\n <Form :model="formData" :rules="formRules" ref="form" label-width="80px">\n <FormItem label="姓名" prop="name">\n <Input v-model="formData.name" placeholder="请输入姓名" />\n </FormItem>\n <FormItem label="年龄" prop="age">\n <Input v-model="formData.age" placeholder="请输入年龄" />\n </FormItem>\n <FormItem label="邮箱" prop="email">\n <Input v-model="formData.email" placeholder="请输入邮箱" />\n </FormItem>\n <FormItem>\n <Button type="primary" @click="submitForm">提交</Button>\n </FormItem>\n </Form>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n formData: {\n name: '',\n age: '',\n email: '',\n },\n formRules: {\n name: [\n { required: true, message: '请输入姓名', trigger: 'blur' },\n { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' },\n ],\n age: [\n { required: true, message: '请输入年龄', trigger: 'blur' },\n { type: 'number', message: '年龄必须为数字', trigger: 'blur' },\n ],\n email: [\n { required: true, message: '请输入邮箱', trigger: 'blur' },\n { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },\n ],\n },\n };\n },\n methods: {\n submitForm() {\n this.$refs.form.validate((valid) => {\n if (valid) {\n // 表单校验通过，可以提交表单数据\n console.log(this.formData);\n } else {\n // 表单校验不通过\n return false;\n } \n });\n },\n },\n};\n</script>\n\n\n以上代码封装了一个简单的表单组件，包含了姓名、年龄和邮箱三个输入框，并对输入进行了校验。点击提交按钮时，会进行表单校验，如果通过校验，会打印出表单数据。\n\n这样就完成了使用Element Plus封装表单控件的过程。你可以根据需要进一步扩展和定制这个组件。