### 如何在 Element UI 中获取 el-form 表单数据 在 Vue 项目中，使用 Element UI 的 `el-form` 组件时，可以通过绑定表单域的值到一个对象上并利用该对象来获取整个表单的数据。以下是实现这一功能的具体方式： #### 数据绑定 通过设置组件中的 `data()` 方法返回的对象属性作为表单字段的初始值，并将其与 `v-model` 进行双向绑定[^3]。 ```javascript export default { data() { return { formData: { // 初始化表单数据 name: '', email: '' } }; }, }; ``` 上述代码片段展示了如何定义一个名为 `formData` 的对象用于存储表单数据。其中包含了两个字段：`name` 和 `email`，它们分别代表用户的姓名和电子邮件地址。 #### 提交按钮事件处理函数 当用户点击提交按钮时，可以调用自定义的方法，在此方法内部访问已绑定至 `formData` 属性上的所有输入项的内容。 ```javascript methods: { submitForm() { console.log(this.formData); // 输出当前填写好的表单信息 // 可在此处执行更多操作，例如发起网络请求等逻辑... } } ``` 如果希望验证表单的有效性后再继续其他流程，则需借助于 `$refs` 来手动触发校验过程[^1]: ```javascript <template> <el-form ref="ruleFormRef" :model="formData"> <!-- ... --> <el-button type="primary" @click="handleSubmit">Submit</el-button> </el-form> </template> <script> export default { methods: { handleSubmit() { this.$refs.ruleFormRef.validate((valid) => { if (valid) { alert('submit!'); console.log(this.formData); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 以上模板部分新增了一个引用名称 (`ref`) 赋予给 `<el-form>` 元素以便稍后能够方便地对其进行控制；而脚本区块则修改了原有的 `submitForm` 函数名改为更贴切实际用途的新名字——即 `handleSubmit` ，并且增加了对于有效性的判断语句。 #### 阻止默认行为 另外需要注意的是，默认情况下 HTML 表单会在按下 Enter 键或者点击 Submit 按钮的时候尝试向服务器发送 GET 请求从而导致页面重载现象发生。为了避免这种情况出现，可以在根级标签 `<el-form>` 上添加特殊指令以禁用这种自动提交动作[^4]: ```html <el-form @submit.native.prevent> ... </el-form> ``` 这样做的好处在于即使存在多个嵌套层次结构下的子控件也依然能生效全局范围内的预防措施。 综上所述，要成功捕获由 element-ui 所构建出来的 form 控制器里面所含有的全部资料内容，就需要合理运用 vuejs 提供的各种特性以及遵循官方文档给出的最佳实践指南来进行开发工作。