vue表单中动态添加输入框的方法

vue表单中动态添加输入框的方法2019-12-20
1.数据格式

form: {
          name: '',
          sex: '',
          num: '',
          phone: '',
          date: '',
          domains: [{ // 动态添加的input
            date1: '',
            administrator: '',
            room: '',
            key: Date.now(),
            orderConProject: [],
          }]
        },

2.要动态添加的部分循环

<div class="orderCon" v-for='(orderItem,index) in form.domains' :key='orderItem.key'>
          <i v-if='index!==0' class="el-icon-close orderConDel" style="color:#DFADAE"
            @click='delAdministrator(orderItem)'></i>
          <el-row>
            <el-col :span=10 :offset=1>
              // :prop="'v-for的数组名.' + index + '.name名'" 
              // prop路径就是能获取到input的value值的路径
              // rules要单独写
              <el-form-item label="" :prop="'domains.' + index + '.administrator'" :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
              }">
                <el-select v-model="orderItem.administrator" placeholder="预约管理师" style="width:100%;" clearable>
                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

3.点击添加时向数组中添加新对象

addAdministrator() {
        this.form.domains.push({
          date1: '',
          administrator: '',
          room: '',
          key: Date.now(),
          orderConProject: [],
        })
      },

4.删除

 delAdministrator(item) {
        var delId;
        this.form.domains.map((val, ind) => {
          if (val.key == item.key) {
            delId = ind
          }
        });
        this.form.domains.splice(delId, 1)

        // this.form.domains.map((val, ind) => {
        //   if (item.key == val.key) {
        //   使用indexOf可以删除数组中某个对象 ，tag是个对象{key:val}
        //     val.orderConProject.splice(this.kdnrTags.indexOf(tag), 1)
        //   }
        // })
      },

效果

image.png