zoukankan      html  css  js  c++  java
  • 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

    是我吖~
  • 相关阅读:
    SharePoint学习资料收集
    VS2008 IDE界面
    罗列没有主键的表
    Google Calendar API练习
    pb中数据窗口中字段只显示255个的解决方法
    oracle 中的事务和update from 语句
    sqlserver2005数据库扩容方案
    在一个表上创建非聚集索引和聚集索引
    <xsl:applytemplates/>的应用
    时间戳转换为日期类型
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/14704662.html
Copyright © 2011-2022 走看看