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)
      }
 },