1. 程式人生 > 其它 >elementUi迴圈表單校驗

elementUi迴圈表單校驗

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