在Vue 2.0中使用Element UI框架封装一个通用表单组件的基本步骤如下：
- 创建一个新的Vue组件文件，例如
BaseForm.vue。 - 在该组件中，使用
el-form和相关的el-form-item组件来构建表单。 - 通过props传递数据和方法到子组件，如表单项(
formItems)、数据(formData)、提交方法(submitMethod)等。 - 在父组件中引入并使用
BaseForm组件，并传递必要的props。
以下是一个简单的封装例子：
BaseForm.vue:
<template>
<el-form :model="formData" @submit.native.prevent="submitForm">
<el-form-item
v-for="(item, index) in formItems"
:key="index"
:label="item.label">
<el-input
v-if="item.type === 'input'"
v-model="formData[item.prop]"
:placeholder="item.placeholder">
</el-input>
<!-- 其他表单项组件，如el-select, el-date-picker等 -->
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
formItems: {
type: Array,
required: true
},
formData: {
type: Object,
required: true
},
submitMethod: {
type: Function,
required: true
}
},
methods: {
submitForm() {
this.submitMethod(this.formData);
}
}
};
</script>
父组件中使用BaseForm.vue:
<template>
<base-form
:form-items="formItems"
:form-data="formData"
:submit-method="submitForm">
</base-form>
</template>
<script>
import BaseForm from './BaseForm.vue';
export default {
components: {
BaseForm
},
data() {
return {
formItems: [
{ label: '用户名', prop: 'username', placeholder: '请输入用户名', type: 'input' },
{ label: '密码', prop: 'password', placeholder: '请输入密码', type: 'input' }
// 更多表单项
],
formData: {
username: '',
password: ''
// 更多字段
}
};
},
methods: {
submitForm(data) {
// 处理提交逻辑
console.log(data);
}
}
};
</script>
在这个例子中，BaseForm组件接收三个props：formItems、formData和submitMethod。formItems定义了表单项的列表，每个表单项包含标签文本(label)、数据属性(prop)、类型(type)和占位符(placeholder)。formData是一个包含表单数据的对象，submitMethod是父组件提供的处理表单提交的方法。当用户点击提交按钮时，会触发submitForm方法，并将表单数据作为参数传递给这个方法。