vue表单点击按钮新增表单输入框（可扩展所有表单类型）

项目中，有一些特殊需求的表单，例如点击按钮，新增一行输入框

 

 

 

 实现如下：

<el-form-item
    v-for="(domain, index) in ruleForm.domains"
    :label="index === 0 ? '解析服务域名：':''"       
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
          required: true, message: '请输入服务域名', trigger: 'blur'
     }"
>
     <el-input v-model="domain.value" size="mini" style="width: 60%;"></el-input>
     <el-button size="mini" @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>

//数据格式
this.ruleForm = {
     gateway: '',
     exit: '',
     domains: [{
       value: '',
       key: 1
     }],
}

//增加一行

　　addDomain() {

      this.ruleForm.domains.push({

        value: '',

        key: Date.now()

      });

    },

//删除
removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item)
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1)
      }
 },