vue+element UI动态增减表单-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+element UI动态增减表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面：因为最近有个需求，需要新增联系人，而联系人数量并不确定，需要根据需要添加表单，一个联系人对应一个表单。

效果是这样的:

思路：①写个div，把表单放在里面，旁边放2个按钮，添加和删除，且只有1个元素的时候不能显示删除按钮

②先用一个空的list，结合v-for来显示div，每次新增，就push一个新的空元素，点击删除，则splice一个元素

③，如果是点击“编辑按钮”，那么就要把list先初始化为已有数组

具体实现代码如下：

一、写好数组

            list:[],
            addForm:[],
            addStr:"",
            tempList:[
                {
                customerContactKey:"",
                contactInfo: "",//联系信息
                contactName: "",//联系人
                tel:"",
                email:"",
                address: {
                  // 省
                  province: "",
                  // 市
                  city: "",
                  // 区
                  district: "",
                  //详细地址
                  detail:""
                },//联系地址
              }
            ],

二、用v-for循环显示在页面上

      <div><span class="msg-title">常用联系人</span></div>
      <div  v-for="(item,index) in tempList" :key="index" style="width:1300px">
        <div class="toAddcontact">
          <el-form  :model="item" :rules="addRules" ref="addForm" label-width="100px" class="add-ruleForm">
            <el-row>
              <el-col :span="6">
                <el-form-item label="联系人姓名" prop="contactName">
                  <el-input v-model="item.contactName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系信息" prop="contactInfo">
                  <el-input v-model="item.contactInfo"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="联系电话" prop="tel">
                  <el-input v-model="item.tel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系邮箱" prop="email">
                  <el-input v-model="item.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="联系地址" prop="address"  v-model="item.address">
                  <checkAddress ref="address"  v-model="item.address" :key="index" :form="item.address"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="color: #409EFF;float:right">
            <span style="margin:20px;cursor:pointer" @click="toAdd(index)">添加</span>
            <span style="margin:20px;cursor:pointer" @click="toDelete(index)" v-if="tempList.length>1">删除</span>
          </div>
        </div>

      </div>

三、写好css样式

<style lang="scss">
.msg-title{
  font-weight: 500;
  margin-right:20px;
  line-height: 60px;
}
.el-select{
  width:100%;
}
.demo-ruleForm{
  padding:0 80px 50px 80px;
}
.toAddcontact{
  border:1px solid #eee;
  padding:20px;
  margin:20px;
  width: 1000px;
  float:left;
  .add-ruleForm{
    padding:50px 80px 10px 80px;
  }
}
</style>

四、定义操作方法

      toDelete(index){
        this.tempList.splice(index,1)
      },
      toAdd(index){
        console.log(index,this.tempList);
        //每次增加，都要添加一个空的数组来存放新输入的数据
        this.tempList.push({ 
              customerContactKey: "",
              contactInfo: "",//联系信息
              contactName: "",//联系人
              tel:"",
              email:"",
              address: {
                // 省
                province: "",
                // 市
                city: "",
                // 区
                district: "",
                //详细地址
                detail:""
              },//联系地址
        })
        console.log(this.tempList,this.ruleForm)
      },

这样就已经完成啦！~文章来源地址https://www.toymoban.com/news/detail-506896.html

到了这里，关于vue+element UI动态增减表单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！