vue 动态增减表单以及动态增减表单的某一项（一）

1.业务需求分析 👇

一个业务的需求和一个功能的实现，先不要下手就开始，而要先去分析整理逻辑，这是我一个同行的小伙伴告诉我的，ok，进入正题：

两个需求，一是点击增加采购人，就会增加一行input输入框，如图：

二是，点击继续添加，增加一个form表单，form表单里也有新增联系人需求

2.动态增减表单某一项 👇

在element-ui组件 form表单 中可以看到有，下面是我的代码

<!-- 显示的表单 -->
        <el-form class="purchases_alls_bott_form" ref="form" :model="forms" label-width="120px">
          <el-form-item label="选择待采购订单">
            <el-input
              placeholder="请选择待采购订单"
              class="purchases_alls_bott_form_input"
              v-model="forms.name"
            ></el-input>
            <el-button
              type="primary"
              @click="outerVisible = true"
              class="purchases_alls_bott_form_btn"
              plain
            >选择</el-button>
          </el-form-item>
          <el-form-item label="采购数量">
            <el-input v-model="forms.desc"></el-input>
          </el-form-item>
          <el-form-item label="采购人">
            <el-input :placeholder="forms.peop" :disabled="true" v-model="form.peop"></el-input>
          </el-form-item>
          <div
            class="purchases_alls_bott_form_required"
            v-for="(item,key) in forms.domains"
            :key="key"
          >
            <el-form-item :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}" label="采购人">
              <el-input v-model="item.peop"></el-input>
            </el-form-item>
            <i class="el-icon-delete" @click="deleteItem(key)"></i>
          </div>
          <div class="purchases_alls_bott_form_addbtn">
            <el-button @click="addItem" type="primary">增加采购人</el-button>
          </div>
        </el-form>

css样式：

.purchases_alls_bott .purchases_alls_bott_form{
  margin-top: 20px;
  border: 1px solid #ccc;
  margin-left: 300px;
  margin-right: 300px;
  padding: 80px;
  border-radius: 5px;
}
.purchases_alls_bott .purchases_alls_bott_form .el-form-item__label{
  color: #909399;
  font-size: 15px;
}
.purchases_alls_bott .purchases_alls_bott_form .purchases_alls_bott_form_input{
  width: 80%;
}
.purchases_alls_bott .purchases_alls_bott_form .purchases_alls_bott_form_btn{
  margin-left: 25px;
}
.purchases_alls_bott  .purchases_alls_bott_form_bobtn{
  text-align: center;
  margin-top: 35px;
}
.purchases_alls_bott .purchases_alls_bott_form_addbtn{
  text-align: center;
}
 .purchases_alls_bott_form_bobtn .purchases_alls_bott_form_bobtn_one{
  width: 108px;
}

.purchases_alls_bott .purchases_alls_bott_form .purchases_alls_bott_form_required{
  position: relative;
}
.purchases_alls_bott_form .purchases_alls_bott_form_required .el-icon-delete{
  position: absolute;
  cursor: pointer;
  right: -30px;
  top: 9px;
}

在data中定义：

 // 一开始展示的form
     forms:{
       name: "",
       desc: "",
       peop: "隔壁老王",
       domains: []
     },
 // for 循环添加的form
     all:[],

methods方法：

addItem () {
   this.forms.domains.push({
      peop: "",
    })
},
//  给forms内的domains数组push增加一个新属性（新增输入框绑定的值）
deleteItem (key) {
   this.forms.domains.splice(key, 1)
 },
 //  key值删除点击的这一项

至此，动态增减表单的某一项完成

3.动态增减表单 👇

原理跟动态增减表单项一样

    <div class="purchases_alls_bott_form" v-for="(item,index) in all" :key="index">
      <el-form ref="form" label-width="120px">
        <el-form-item label="选择待采购订单">
          <el-input
            placeholder="请选择待采购订单"
            class="purchases_alls_bott_form_input"
            v-model="item.name"
          ></el-input>
          <el-button
            type="primary"
            @click="outerVisible = true"
            class="purchases_alls_bott_form_btn"
            plain
          >选择</el-button>
        </el-form-item>
        <el-form-item label="采购数量">
          <el-input v-model="item.desc"></el-input>
        </el-form-item>
        <el-form-item label="采购人">
          <el-input :placeholder="item.peop" :disabled="true" v-model="item.peop"></el-input>
        </el-form-item>
        <div
          class="purchases_alls_bott_form_required"
          v-for="(domains,key) in item.domains"
          :key="key"
        >
          <el-form-item
            :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}"
            label="采购人"
          >
            <el-input v-model="domains.peop"></el-input>
          </el-form-item>
          <i class="el-icon-delete" @click="deleteItemone(key,index)"></i>
        </div>
        <div class="purchases_alls_bott_form_addbtn">
          <el-button @click="addItemOne(index)" type="primary">增加采购人</el-button>
        </div>
      </el-form>
    </div>
    <div class="purchases_alls_bott_form_bobtn">
      <el-button
        @click="surrPurchase"
        class="purchases_alls_bott_form_bobtn_one"
        type="primary"
      >确认采购</el-button>
      <el-button
        class="purchases_alls_bott_form_bobtn_one"
        @click="addforms"
        type="success"
      >继续添加</el-button>
    </div>

methods:

// 点击继续添加按钮的时候，给已经声明过的all增加属性值，就会实现增加表单的功能
addforms(){
  this.all.push({
      name: "",
      desc: "",
      peop: this.forms.peop,
      domains:[]  
  })
  console.log(this.all); 
},
// 点击form里面的新增联系人，这里我们是通过index索引去增加联系人
addItemOne(index){  
   this.all[index].domains.push({
      peop: ''
    })
},
//  通过index删除key值的联系人
 deleteItemone (key,index) {
  this.all[index].domains.splice(key, 1) 
 },

至此，动态增加表单已经完成，删除的功能：

在添加的form表单在加上这一段

 <div class="purchase_alls_bott_deletform"><i @click="deleteAllForms(index)" class="el-icon-delete"></i></div>

css：

 .purchases_alls_bott_form .purchase_alls_bott_deletform{
  margin-top: 20px;
  text-align: right;
}
.purchases_alls_bott_form .purchase_alls_bott_deletform .el-icon-delete{
  cursor: pointer;
  font-size: 36px;
  color: #409EFF;
}

methods:

 deleteAllForms(index){
    this.all.splice(index, 1)
 }

动态增减表单和动态增减表单的某一项就已完成