封装一个动态表单组件在 Vue 2 和 Element UI 中需要考虑到表单字段的动态添加、删除以及验证等复杂功能。下面是一个简单的例子,展示如何创建一个可以动态添加和删除字段的表单组件。
首先,你需要安装并引入 Element UI:
bash
复制
npm install element-ui --save
然后,在你的 Vue 组件中引入 Element UI 的相关组件,并创建一个 DynamicForm.vue 组件:
<template>
<el-form :model="form" ref="dynamicForm" label-width="120px">
<div v-for="(item, index) in formItems" :key="index">
<el-form-item
:label="item.label"
:prop="`formItems[${index}].value`"
:rules="item.rules"
>
<el-input v-if="item.type === 'text'" v-model="item.value"></el-input>
<!-- 这里可以添加其他类型的输入组件,比如 el-select, el-date-picker 等 -->
</el-form-item>
<el-button type="danger" @click="removeField(index)">删除</el-button>
</div>
<el-button type="primary" @click="addField">添加字段</el-button>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'DynamicForm',
data() {
return {
form: {
formItems: [], // 动态表单字段数组
},
fieldTypes: ['text'], // 可用的字段类型
};
},
methods: {
addField() {
this.form.formItems.push({
type: 'text', // 默认的字段类型
label: '新字段',
value: '',
rules: [
{ required: true, message: '请输入值', trigger: 'blur' },
],
});
},
removeField(index) {
this.form.formItems.splice(index, 1);
},
submitForm() {
this.$refs.dynamicForm.validate((valid) => {
if (valid) {
alert('提交成功!');
// 在这里处理表单的提交逻辑,例如发送请求到后端
} else {
console.log('表单验证失败!');
return false;
}
});
},
},
};
</script>
<style scoped>
/* 你可以在这里添加一些自定义的样式 */
</style>