elementUi迴圈表單校驗
阿新 • • 發佈:2022-03-31
html:
<div v-for="(data, index) in model.listParam" :key="index"> <el-col :span="12"> <el-form-item :label="data.label1" :prop="'listParam.'+index+'.subsystemCode'" :rules="rule1"> <el-select v-model="data.subsystemCode" :disabled="isaddAble" style="width:100%" @change="changeProject(data.subsystemCode, index)"> <el-option v-for="(v,i) in scope" :key="v.code+i" :label="v.name" :value="v.code"></el-option> <!--這裡vule不能是一個物件的,會導致選每一個都是全選--> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item :label="data.label2" :prop="'listParam.'+index+'.tdCode'":rules="rule1"> <el-select v-model="data.tdCode" :disabled="isaddAble" style="width:100%" @change="changeTD(data.tdCode, index)"> <el-option v-for="(v,i) in data.allLanes" :key="v.code+i" :label="v.name" :value="v.code"></el-option> <!--這裡vule不能是一個物件的,會導致選每一個都是全選-->
</el-select> </el-form-item> </el-col> </div>
js:
data () { entryParam: [ { subsystemCode: '', subsystemName: '', tdId: '', tdName: '', tdCode: '', number: 1, // 前端渲染欄位 subsystemInfo: null, tdInfo: null, label1: '入境閘口專案', label2: '入境閘口車道', allLanes: [] }, { subsystemCode: '', subsystemName: '', tdId: '', tdName: '', tdCode: '', number: 2, // 前端渲染欄位 subsystemInfo: null, tdInfo: null, label1: '接駁站入口專案', label2: '接駁站入口車道', allLanes: [] }, { subsystemCode: '', subsystemName: '', tdId: '', tdName: '', tdCode: '', number: 3, subsystemInfo: null, tdInfo: null, label1: '接駁站出口專案', label2: '接駁站出口車道', allLanes: [] } ], exitParam: [ { subsystemCode: '', subsystemName: '', tdId: '', tdName: '', tdCode: '', number: 1, subsystemInfo: null, tdInfo: null, label1: '接駁站入口專案', label2: '接駁站入口車道', allLanes: [] }, { subsystemCode: '', subsystemName: '', tdId: '', tdName: '', tdCode: '', number: 2, subsystemInfo: null, tdInfo: null, label1: '接駁站出口專案', label2: '接駁站出口車道', allLanes: [] }, { subsystemCode: '', subsystemName: '', tdId: '', tdName: '', tdCode: '', number: 3, subsystemInfo: null, tdInfo: null, label1: '出境閘口專案', label2: '出境閘口車道', allLanes: [] }, ], model: { routeName: '', type: '1', customerId: jportalCommon.userStorageService.getUser().masterCustomerId, listParam: [], settings:[] }, rules: { routeName: [{ required: true, trigger: 'blur', message: '請輸入路線名稱' }], }, rule1: [{ required: true, message: '請選擇', trigger: 'change' }], scope: [], isEntryGate: true }, watch: { isEntryGate (v) { return this.model.listParam = v ? [...this.entryParam] : [...this.exitParam] } }, changeProject (v, index) { console.log('選擇專案值', v, index) //0,入口;1,出口 //路線型別:1入境2出境 let passType = 5; let paramDate = {subsystemCode:v, type:passType}; queryPassByCodeList(paramDate).then(res => { this.model.listParam[index].allLanes = res.respData }).catch(err => { return Promise.reject(err) }) let _data = this.scope.find(s => s.code === v) // 根據選中的code值去匹配到這個物件 this.model.listParam[index].subsystemCode = v this.model.listParam[index].subsystemName = _data.name console.log('this.model.listParam = ', this.model.listParam) }, changeTD (v, index) { console.log('選擇通道值', v, index) let _data = this.model.listParam[index].allLanes.find(s => s.code === v) // 根據選中的code值去匹配到這個物件
this.model.listParam[index].tdId = _data.id this.model.listParam[index].tdName = _data.name this.model.listParam[index].tdCode = v },