### Vue中创建居中显示的Form表单并实现提交功能的代码示例 在Vue中，可以通过使用Element UI的`el-form`组件来创建一个居中显示的表单，并实现提交功能。以下是一个完整的代码示例，展示了如何实现这一需求： ```html <template> <div class="form-container"> <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form" > <el-form-item label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-input v-model="form.region"></el-input> </el-form-item> <el-form-item label="活动形式" prop="type"> <el-input v-model="form.type"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> <el-button @click="resetForm('form')">重置</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { name: '', region: '', type: '' }, rules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ], region: [ { required: true, message: '请输入活动区域', trigger: 'blur' } ], type: [ { required: true, message: '请输入活动形式', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('验证失败!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script> <style scoped> .form-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .demo-form { width: 400px; } </style> ``` #### 说明 1. **表单模型绑定**：通过`:model="form"`将表单数据绑定到`form`对象上，确保每个表单项的值都可以动态更新[^1]。 2. **校验规则**：通过`:rules="rules"`为表单添加校验规则，确保用户输入符合要求。 3. **表单提交**：定义`submitForm`方法，在点击提交按钮时触发表单校验逻辑。如果校验通过，则执行相关操作；否则提示错误信息[^1]。 4. **样式调整**：通过CSS样式使表单居中显示。使用`display: flex`和`justify-content: center`等属性实现垂直和水平居中[^2]。 ### 注意事项 - 表单中的`prop`属性必须与`form`对象的字段一一对应，否则会导致校验失败[^1]。 - 如果需要调整输入框宽度，可以直接在`el-input`标签中添加`style="width: xxxpx"`[^2]。