elementui的表单如何封装成组件

要将 ElementUI 的表单封装成组件，可以按照以下步骤进行：

1. 创建一个 Vue 组件文件，命名为 form.vue。
2. 在组件中引入 ElementUI 的表单组件和相关组件库，例如 Input、Select、Radio 等。
3. 在组件中定义表单的数据模型和校验规则。
4. 使用 ElementUI 的表单组件和相关组件库，将表单的各个字段进行渲染，并绑定数据模型和校验规则。
5. 在组件中定义提交表单的方法，并将表单数据作为参数传递给父组件或调用后端接口进行处理。
6. 在父组件中引入 form.vue 组件，并通过 props 向组件传递数据和校验规则。
7. 在父组件中监听子组件的 submit 事件，调用子组件的提交表单方法。

示例代码：

form.vue 组件：

<template>
<div>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="爱好" prop="hobby">
<el-select v-model="form.hobby" multiple>
<el-option label="篮球" value="basketball"></el-option>
<el-option label="足球" value="football"></el-option>
<el-option label="游泳" value="swimming"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</template>

<script>
export default {
data() {
return {
form: {
name: '',
gender: '',
age: '',
hobby: []
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
],
hobby: [
{ required: true, message: '请选择爱好', trigger: 'change' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('submit', this.form);
}
});
}
}
}
</script>

父组件：

<template>
<div>
<form :model="form" :rules="rules" @submit="handleSubmit">
<form-item label="姓名" prop="name">
<input v-model="form.name"/>
</form-item>
<form-item label="性别" prop="gender">
<radio-group v-model="form.gender">
<radio label="male">男</radio>
<radio label="female">女</radio>
</radio-group>
</form-item>
<form-item label="年龄" prop="age">
<input v-model.number="form.age"/>
</form-item>
<form-item label="爱好" prop="hobby">
<select v-model="form.hobby" multiple>
<option label="篮球" value="basketball"></option>
<option label="足球" value="football"></option>
<option label="游泳" value="swimming"></option>
</select>
</form-item>
</form>
</div>
</template>

<script>
import Form from './form.vue';
export default {
components: {
Form
},
data() {
return {
form: {},
rules: {}
}
},
methods: {
handleSubmit(data) {
// 处理表单数据
}
}
}
</script>