用vue+elementUI實現(xiàn)動態(tài)表單，點擊新增，增加一行輸入框，并可以刪除當前輸入框功能。
先上圖：

image.png

輸入框選擇完后才能添加下一個輸入框，最少保留一個輸入框，所以當只有一個數據框的時候不展示刪除按鈕。

image.png

上代碼

<el-form ref="form" :model="formData" label-position="top">
    <div>
        <div class="module-table-name mb15">
            <span>基礎條件選擇</span>
        </div>
        <div class="flex_row">
            <div v-for="(item, index) in formData.libraryIdList" :key="index" class="fx_5">
                 <el-form-item>
                      <div class="flex_center mr30">
                          <div class="tit-box fx_2">
                               <span>庫位名稱</span>
                          </div>
                          <el-select v-model="item.id" placeholder="請選擇庫位" filterable :popper-append-to-body="false">
                               <el-option v-for="libraryItem in libraryOptions" :key="libraryItem.value" :label="libraryItem.label" :value="libraryItem.value"> </el-option>
                          </el-select>
                          <div v-if="formData.libraryIdList.length > 1" @click="delRow(item, index)">
                              <span class="el-icon-remove"></span>
                          </div>
                      </div>
                  </el-form-item>
             </div>
         </div>
         <div class="addBtn" @click="addLibraryIdList">
             <div class="el-icon-plus">新增條件</div>
         </div>
     </div>
</el-form>

data() {
        return {
            formData: {
                libraryIdList: [{ id: '' }],
            },
            libraryOptions: [
               {value:'1',label:'庫位1'}，
               {value:'2',label:'庫位2'}，
               {value:'3',label:'庫位3'}，
               {value:'4',label:'庫位4'}，
               {value:'5',label:'庫位5'}，
               {value:'6',label:'庫位6'}，
            ], // 庫存名稱列表
        };
},
methods: {
       //添加庫存名稱
        addLibraryIdList() {
           if (this.formData.libraryIdList.length > 0) {
                let hasValue = false;
                for (let i = 0; i < this.formData.libraryIdList.length; i++) {
                    if (!this.formData.libraryIdList[i].id) {
                        hasValue = true;
                        break;
                    }
                }
                if (hasValue) {
                    return this.$message.warning('請先選擇未選擇項');
                }
                this.formData.libraryIdList.push({ id: '' });
            }
        }, 
        //庫存名稱刪除
        delRow(item, index) {
            if (this.formData.libraryIdList.length > 1) {
                this.formData.libraryIdList.splice(index, 1);
            } else {
                this.$message.warning('至少選擇一項');
            }
        },
}