【vue】element ui 實現動態表單點擊按鈕新增行/刪除行

這里針對點擊按鈕增刪一排輸入框的問題做一個總結。效果圖如下：

存在一排必填的內容，點擊新增行后會新增一行，點擊每行后面的刪除按鈕則會刪除該行

考慮的實現方式是，先寫死一個必須的表單，需要新增表單的放在一個div里，在div中使用v-for生成，達到同時增加的效果。

 

 

 動態表單部分代碼如下：

<div class="left_Box">
     <div class="btnTool" style="text-align:right;">
         <el-button type="primary" size="mini"@click="addDomain">新增行</el-button>
         <el-button type="primary" size="mini"@click="clear_btn('dynamicValidateForm')">清空</el-button>
         <el-button type="primary" size="mini"@click="submitForm('dynamicValidateForm')">存為模板</el-button>
     </div>
     <div>
         <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" :inline="true" class="demo_dynamic">
                <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="dv_hang" >
                  <el-form-item
                    :key="domain.key"
                    :prop="'domains.' + index + '.lx'"
                    :rules="{
                      required: true, message: '不能為空', trigger: 'blur',
                    }"
                  >
                    <label>狀態符</label>
                    <el-select v-model="domain.lx" size="small">
                      <el-option label="計划停運" value="PO"></el-option>
                      <el-option label="非計划停運" value="UO"></el-option>
                      <el-option label="第一類非計划停運" value="UO1"></el-option>
                      <el-option label="第二類非計划停運" value="UO2"></el-option>
                      <el-option label="第三類非計划停運" value="UO3"></el-option>
                      <el-option label="第四類非計划停運" value="UO4"></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item
                    :key="domain.key1"
                    :prop="'domains.' + index + '.qsfw'"
                    :rules="{
                      required: true, message: '不能為空', trigger: 'blur',
                    }"
                  >
                    <label>時間范圍</label>
                    <el-input-number v-model="domain.qsfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <!-- <el-input v-model="domain.qsfw" size="small"></el-input> -->
                  </el-form-item>
                  
                  <el-form-item
                    :key="domain.key2"
                    :prop="'domains.' + index + '.zzfw'"
                    :rules="{
                      required: true, message: '不能為空', trigger: 'blur',
                    }"
                  >
                    <label>至&nbsp;&nbsp;</label>
                    <el-input-number v-model="domain.zzfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <!-- <el-input v-model="domain.zzfw" size="small"></el-input> -->
                  </el-form-item>

                  <el-form-item
                    :key="domain.key3"
                    :prop="'domains.' + index + '.zsxs'"
                    :rules="{
                      required: true, message: '不能為空', trigger: 'blur',
                    }"
                  >
                    <label>折算比例</label>
                    <el-input-number v-model="domain.zsxs" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <!-- <el-input v-model="domain.zsxs" size="small"></el-input> -->
                    <el-button @click.prevent="removeDomain(domain)" size="small" class="delhang_class">刪除行</el-button>
                  </el-form-item>
                </div>
           </el-form>
    　　</div>
</div>

data定義部分

export default {
  name: 'dynamicForm',
  data () {
    return {
　　　　dynamicValidateForm: {
          domains: [{
            lx:'',//狀態符
            qsfw:'',//起始范圍
            zzfw:'',//截止范圍
            zsxs:'',//折算比例
          }],
        },
    }
  }
}

在methods里增加的方法

methods: {
          removeDomain(item) {//刪除行
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
            }
          },
          addDomain() {//新增行
            this.dynamicValidateForm.domains.push({
              lx:'',//狀態符
              qsfw:'',//起始范圍
              zzfw:'',//截止范圍
              zsxs:'',//折算比例
              key: Date.now()
            });
          },
          submitForm(formName) {//保存按鈕
            this.$refs[formName].validate((valid) => {
              if (valid) {
                console.log(this.dynamicValidateForm.domains)
                this.savemoban(this.dynamicValidateForm.domains)
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          clear_btn(formName) {
            this.$refs[formName].resetFields();
          },
          savemoban(domainsdata){//存為模板
            let params = {
              zsgs:domainsdata,
            };
            this.servicept
            .post("/sbdZhzbFx/saveCaclueFormula", params)
            .then((res) => {
              if(res.data.msg=="成功"){
                this.$message.success("成功！");
              }else{
                this.$message.error("失敗！");
              }
            }).catch((res) => {
            });
          },      
},

需要注意的一點：

普通表單驗證單項依靠的是prop而動態生成的表單要用:prop

書寫的語法是:prop="'domain.' + index +'.lx'"，domain是v-for綁定的數組，index是索引，lx是表單綁定的v-model的名稱，然后用.把他們鏈接起來。

所以總結起來的語法就是:prop="'v-for綁定的數組.' + index + '.v-model綁定的變量'"