elementUi循环表单校验


html:

for="(data, index) in model.listParam" :key="index"> :prop="'listParam.'+index+'.subsystemCode'" :rules="rule1"> for="(v,i) in scope" :key="v.code+i" :label="v.name" :value="v.code"> :prop="'listParam.'+index+'.tdCode'" :rules="rule1"> for="(v,i) in data.allLanes" :key="v.code+i" :label="v.name" :value="v.code">

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