1. 程式人生 > 實用技巧 >el-form動態表單驗證

el-form動態表單驗證

https://www.cnblogs.com/zr123/p/11461124.html

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">    
 2            <div v-for="(domain, index) in dynamicValidateForm.list">
 3              <el-form-item label="" style="margin-left: -70px"
> 4 <el-select v-model="dynamicValidateForm.list[index].organizer.positionId" @change="Positon($event)"> 5 <el-option 6 v-for="item in positionList" 7 :key="item.id" 8 :label="item.name" 9 :value
="item.id" 10 :disabled="item.disabled" 11 ></el-option> 12 </el-select> 13 </el-form-item> 14 <el-form-item style="margin-left: -29px" 15 label="人數" 16 :prop
="'list.' + index + '.organizer.number'" 17 :rules="{required: true, message: '請輸入人數', trigger: 'blur'}"> 18 <el-input v-model="domain.organizer.number" placeholder="人數"></el-input> 19 </el-form-item> 20 <el-form-item label="直屬下級" v-if="dynamicValidateForm.list[index].organizer.positionId!==1"> 21 <el-select v-model="dynamicValidateForm.list[index].organizer.parentId"> 22 <el-option 23 v-for="item in positionList" 24 :key="item.id" 25 :label="item.name" 26 :value="item.id" 27 ></el-option> 28 </el-select> 29 </el-form-item> 30 <span style="margin-left: 30px">任務</span> 31 <span v-for="(itm,i) in dynamicValidateForm.list[index].dutyId" :key="i"> 32 <el-form-item label="" style="width: 100px;" id="ren" 33 :prop="'list.' + index + '.dutyId.'+i+'.dutyid'" 34 :rules="{required: true, message: '請選擇任務', trigger: 'change'}" 35 > 36 <el-select v-model="dynamicValidateForm.list[index].dutyId[i].dutyid"> 37 <el-option 38 v-for="item in dutyList" 39 :key="item.id" 40 :label="item.name" 41 :value="item.id" 42 ></el-option> 43 </el-select> 44 </el-form-item> 45 </span> 46 <span class="add" @click="addWork(index)">增加任務+</span> 47 </div> 48 <p class="addLevel" @click="addLevel()">+增加職位</p> 49 </el-form>