封装elementui form

的所有字段，如何获取表单数据并提交到后台？

对于封装elementui form的所有字段，可以在组件中分别定义各个字段属性，例如 v-model、placeholder、readonly等等。同时，需要在form表单中引入组件，并通过ref获取表单实例，再通过form实例上的submit方法提交数据到后台。具体实现过程可以参考以下代码示例：

<template>
<el-form ref="form" :model="formData" label-width="120px">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="formData.age" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</el-form-item>
</el-form>
</template>

<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
}
},
methods: {
handleSubmit() {
this.$refs.form.validate(valid => {
if (valid) {
// 提交到后台的逻辑
console.log(this.formData)
} else {
return false
}
})
}
}
}
</script>

在上述代码中，我们在组件中定义了两个字段属性name和age，并通过v-model绑定到formData对象上。然后在按钮点击事件中，通过this.$refs.form.validate方法来校验表单是否合法，如果合法则输出表单数据并提交到后台。注意，以上代码示例中只展示了如何获取表单数据并提交到后台，如果还需要对表单数据进行处理或者展示错误信息等逻辑，需要根据项目实际需要进行扩展。