成功vue element-ui动态生成表单并获取数据

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <!-- 动态生成 -->
      <div
        class="moreRulesIn"
        v-for="(item, index) in MoreDynamicObject"
        :key="item.key"
      >
        <el-form-item
          label="姓名"
          prop="name"
        >
          <el-input
            v-model="item.name"
            placeholder="请输入姓名"
            class="el-select_box"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          prop="phone"
        >
          <el-input
            v-model="item.phone"
            placeholder="请输入电话"
            class="el-select_box"
          ></el-input>
        </el-form-item>
        <el-button @click="deleteRules(item, index)">删除</el-button>
      </div>
      <el-form-item style="text-align: center">
        <el-button @click="addUser">添加</el-button>
        <el-button type="primary" @click="add()">确定添加</el-button>
        <el-button type="primary" @click="GetData()">获取数据</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      MoreDynamicObject: [
        {
          name: "",
          phone: "",
        },
      ],
    };
  },
  mounted() {
    this.MoreDynamicObject = [];
  },
  methods: {
    addUser() {
      this.MoreDynamicObject.push({
        name: "",
        phone: "",
      });
    },
    deleteRules(item, index) {
      this.index = this.MoreDynamicObject.indexOf(item);
      if (index !== -1) {
        this.MoreDynamicObject.splice(index, 1);
      }
    },
    GetData() {
      this.MoreDynamicObject.forEach((element) => {
        var value = element.name;
        debugger;
      });
    },
    add() {
      //先判断表单是否通过了判断
      this.$refs.form.validate((valid) => {
        //代表通过验证 ,将参数传回后台
        if (valid) {
          debugger;
        }
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>