vue2 elementui 封装一个动态表单复杂组件

封装一个动态表单组件在 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>