element动态表单的校验及动态的prop，required使用

需求：通过+新增一条数据，通过State Rate Type是否有值确认这一行数据是否必填

 <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1600px" v-if="dialogFormVisible" v-dialogDrag>
      <el-form :model="form" ref="form" :inline="true" label-width="145px" :rules="addFormRules">
  
        <!-- 循环 -->
        <el-row v-for="(item,index) in form.stateRates" :key="item+index">
            <el-form-item label="Stated Rate" :prop="'stateRates.' + index + '.statedRate'" :rules="addFormRules.statedRate" :required="item.isStateRateRequired">
                <el-input
                    v-model="item.statedRate"
                    autocomplete="off"
                    clearable
                    placeholder="Stated Rate"
                    @keyup.native="item.statedRate = oninput(item.statedRate,6)">
                </el-input>
            </el-form-item>
            <el-form-item label="Stated Rate Type" :prop="`stateRates.${index}.statedRateType`" :rules="addFormRules.statedRateType" :required="item.isStateRateRequired">
                <el-select v-model="item.statedRateType" placeholder="Stated Rate Type" clearable filterable @change="changeStatedRateType($event, index)">
                    <el-option
                    v-for="(s, i) in statedRateTypeList"
                    :label="s.name"
                    :value="s.id"
                    :key="s + i"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="SR Start Date" :prop="`stateRates.${index}.srStartDate`" :rules="addFormRules.srStartDate" :required="item.isStateRateRequired">
                <el-date-picker
                    class="datePicker"
                    v-model="item.srStartDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="Start Date"
                    :picker-options="pickerOptionsStart"
                    @change="changeSRStartDate($event,index)"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="SR End Date" prop="srEndDate">
                <el-date-picker
                    class="datePicker"
                    v-model="item.srEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="End Date"
                    clearable
                    :picker-options="pickerOptionsEnd"
                    @change="changeSREndDate($event,index)"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label-width="50px">
                <i @click="addStateRates"><svg-icon :icon-class="'plus'"/></i>
                <i @click="deleteStateRates(index)" v-if="form.stateRates.length!=1"><svg-icon :icon-class="'reduce'"/></i>
                
            </el-form-item>
        </el-row>
        <el-form-item label="Status" prop="status">
          <el-select v-model="form.status" placeholder="Status" clearable>
            <el-option
              v-for="(item, index) in statusList"
              :label="item.name"
              :value="item.id"
              :key="item + index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Remark" prop="remark">
          <el-input
            v-model="form.remark"
            autocomplete="off"
            clearable
            placeholder="Remark"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="canceldialogformBtn"
          @click="dialogFormVisible = false"
          >Cancel</el-button
        >
        <el-button class="submitdialogformBtn" @click="addOK('form',$api.projectUpdate,'project')"
          >OK</el-button
        >
      </div>
    </el-dialog>

重点：
:prop=“‘stateRates.’ + index + ‘.statedRate’”，或者 :prop=“stateRates.${index}.statedRateType”
:rules=“addFormRules.statedRate”
:required=“item.isStateRateRequired”

data() {
        const _this = this
        let validateStatedRate =  (rule, value, callback) => {
            let newArr=rule.field.split('.')
            let currentIndex=newArr[1];
            let currentProp=newArr[2];
            let currentPropBro='';
            if(currentProp==='statedRate'){
                currentPropBro=_this.form.stateRates[currentIndex].statedRate;
            }
            if(value===''&&currentPropBro===''&& _this.form.stateRates[currentIndex].isStateRateRequired){
                callback(new Error('Please Enter StatedRate'))
            }else{
                _this.$refs['form'].clearValidate('stateRates.'+ currentIndex + '.statedRate');
                callback()
            }
        };
        let validateSrStartDate =  (rule, value, callback) => {
            let newArr=rule.field.split('.')
            let currentIndex=newArr[1];
            let currentProp=newArr[2];
            let currentPropBro='';
            if(currentProp==='srStartDate') {
                currentPropBro=_this.form.stateRates[currentIndex].srStartDate;
            }
            if(value===''&&currentPropBro===''&& _this.form.stateRates[currentIndex].isStateRateRequired){
                callback(new Error('Please Enter StartDate'))
            }else{
                _this.$refs['form'].clearValidate('stateRates.'+ currentIndex + '.statedRate');
                callback()
            }
        };
        return {
        	addFormRules: {
        		statedRate: [{validator:validateStatedRate, message: 'Please Enter StatedRate', trigger:'blur'}],
            	srStartDate: [{validator:validateSrStartDate, message: 'Please Choose StartDate', trigger:'change'}]
        	}，
        	form: {stateRates: [{statedRate:'',statedRateType:'',srEndDate:'',srStartDate:''}]},
        }
  }，
  methods: {
  		newAdd(type,data) {
            this.dialogFormVisible = true;
            if(type == 'edit'){
                this.title = "Edit";
                this.form = {...data}
                this.stateRateQuery(data.entityId) 
            }else {
                this.title = "Create";
                this.$set(this.form,'status',1);
                this.buList = this.BUList
                this.form = {stateRates:[{statedRate:'',statedRateType:'',srEndDate:'',srStartDate:'',isStateRateRequired:false}]};
            } 
           this.statedRateTypeArr = []
        },
  		addStateRates() {
            let stateRates = {statedRate:'',statedRateType:'',srEndDate:this.form.stateRates[0].srEndDate,srStartDate:this.form.stateRates[0].srStartDate,isStateRateRequired:false}
            this.form.stateRates.push(stateRates)
            this.$forceUpdate()
        },
        deleteStateRates(index) {
            this.form.stateRates.splice(index,1)
            this.$forceUpdate()
        },
        changeStatedRateType(val, index) {
            if(this.form.stateRates.length>1) {
                for(let i = 0; i < this.form.stateRates.length - 1; i++) {
                        if(this.form.stateRates[i].statedRateType == this.form.stateRates[i + 1].statedRateType) {
                            this.$message({
                                showClose: true,
                                message: "Duplicate 'State Rate Type' value, please re select",
                                type: 'error',
                                duration:0
                            });
                        }        
                }
            }
            for(let i = 0; i < this.form.stateRates.length; i++) {
                if (val) {
                    this.form.stateRates[index].isStateRateRequired = true;
                }else {
                    this.form.stateRates[index].isStateRateRequired = false;
                }
            }
            this.$forceUpdate()
        },
        stateRateQuery(id) {
            this.$http.myPostJson(this.$api.projectStateRateQuery,{projectId:id}).then(res => {
                if(res.code == 200) {
                    if(res.data.stateRates.length>0){
                        this.$set(this.form,'stateRates',res.data.stateRates )
                        this.stateRates = res.data.stateRates.filter(item => {
                            return item.statedRate || item.statedRateType || item.srEndDate || item.srStartDate
                        }) 
                        if(this.title == 'Edit') {
                            this.form.stateRates.forEach((item,index)=> {
                                if(item.statedRateType){
                                    this.changeStatedRateType(item.statedRateType,index)
                                }
                            })
                        }
                       
                    }else {
                       this.$set(this.form,'stateRates',[{statedRate:'',statedRateType:'',srEndDate:'',srStartDate:'',isStateRateRequired:false}])
                       this.stateRates = []
                    }
                    this.$forceUpdate()     
                }
            })
        },
  }