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

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

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

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

          
          
            
              // :prop="'v-for的数组名.' + index + '.name名'" 
              // prop路径就是能获取到input的value值的路径
              // rules要单独写
              
                
                  
                  
                
              
            

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