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

 

 

posted @ 2022-03-31 12:01  front-gl  阅读(140)  评论(0编辑  收藏  举报