VUE动态添加表单项及提交,未涉及到校验

<template>
  <div class="content">
      <div class="demo">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <div class="formContent" v-for="(item,index) in pfzyData">
              <h2>个人信息{{pfzyData.length > 1 ? index + 1 : ''}}</h2>
              <el-form-item label="姓名">
                <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-input v-model="item.sex" placeholder="请输入性别"></el-input>
              </el-form-item>
              <el-form-item label="学校">
                <el-input v-model="item.school" placeholder="请输入院校"></el-input>
              </el-form-item>
            </div>
          </el-form>
      </div>
      <div class="add" @click="addItem"><el-button type="info">添加</el-button></div>
      <div class="btn" @click="submitBtn"><el-button type="primary">提交</el-button></div>
      
  </div>
</template>

<script>
export default {
  name: "formAdd",
  props: {},
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign:{
        name:'',
        sex:'',
        school:'',
      },
      pfzyData: [
        {
          name: '',
          sex: '',
          school: ''
        }
      ],
    };
  },
  methods: {
    addItem (){
      var obj = {
          name: '',
          sex: '',
          school: ''
      }
      this.pfzyData.push(obj)
    },
    submitBtn() {
      var data = []
      for (var i = 0; i < this.pfzyData.length; i++) {
        var obj = {}
        obj.name = this.pfzyData[i].name
        obj.sex = this.pfzyData[i].sex
        obj.school = this.pfzyData[i].school
        data.push(obj)
      }
      console.log(data)
      this.axios.post(this.Host+'/doctor/xxx.action', //换成自己的请求地址
        {
          jsonRpStr: JSON.stringify(data)
        }
      )
      .then((res)=>{
        console.log(res.data.respCode,'890-')
        if (res.data.respCode == 1001) {
          this.$message('提交成功~')
        }else{
          this.$message('哈哈哈,参数错误了')
        } 
      })
      .catch((error)=>{
        console.log(error);
      });
    },
  },
  components: {},
};
</script>

<style  lang="scss" scoped="" type="text/css">
div {
  margin-top: 10px;
}
input {
  border: 1px solid #999;
}
.content{
  padding:1rem 8rem;
}
</style>

涉及到图片上传的:https://i.cnblogs.com/files  ——pfzy.zip

是我吖~
原文地址:https://www.cnblogs.com/fkcqwq/p/14704662.html