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

在Vue 2中，你可以通过封装一个组件来创建一个动态表单复杂组件。以下是一个简单的例子，展示了如何使用Element UI创建一个动态表单。

<template>
  <el-form :model="form" ref="dynamicForm" label-width="120px">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :label="'Item ' + (index + 1)"
    >
      <el-input v-model="item.value"></el-input>
      <el-button @click.prevent="removeItem(index)">删除</el-button>
    </el-form-item>
    <el-button @click="addItem">添加项目</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { value: '' }
        ]
      }
    };
  },
  methods: {
    addItem() {
      this.form.items.push({ value: '' });
    },
    removeItem(index) {
      this.form.items.splice(index, 1);
    },
    submitForm() {
      this.$refs.dynamicForm.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          alert('表单验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

这个组件包含了一个动态表单，你可以添加和删除项目，每个项目都是通过一个el-input组件来编辑的。提交表单时，会调用submitForm方法，该方法会验证表单数据的合法性。如果验证通过，会弹出一个提示框显示“提交成功”，如果不通过则显示“表单验证失败”。