在elementUi的 form表单中

总而言之:涉及表单条件渲染一律用v-if代替v-show

注意:1:v-mode 和 prop的值一致
2:el-select下拉框的v-mode相当于下拉框的value值 当v-model是个数组时，v-model是value集合的一位数组，不是一个数组对象，若错误的写成了一个数组对象，则会出现勾选重复的情况

动态表单的校验: 动态:控制变量法

 <el-form :model="formValue" class="container" label-width="200px" v-loading="loading" ref="standardSetForm">
              <el-form-item prop="name" label="选择系统" :rules="[
                { required: true, message: '请选择系统', trigger: 'blur' }
              ]" v-if="type=='second'">
                <el-select v-model="formValue.name" placeholder="请选择系统" style="margin-right: 20px"
                  @change="selectSystem">
                  <el-option v-for="item in system" :key="item.code" :label="item.name" :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="maxDicId" label="分类名称" :rules="[
              { required: true, message: '请选择分类', trigger: 'blur' }
            ]">
                <el-select v-model="formValue.maxDicId" placeholder="请选择分类" style="margin-right: 20px"
                  @change="selectOption">
                  <el-option v-for="item in classifyOptions" :key="item.id" :label="item.dicValue" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- 员工名称 -->
              <el-form-item label="选择用户" prop="selectedEpm" :rules="[
              { required: true, message: '请选择用户', trigger: 'blur' }
            ]" v-if="type=='first'">
                <div v-if="pageModuleType === 'add'">
                  <el-button type="success" @click="showSelectUser()">选择用户</el-button>

                  <el-row>
                    <el-tag v-for="emp in this.formValue.selectedEpm" closable :key="emp.emplid"
                      @close="deleteEmp(emp)">
                      {{ emp.nameDisplay }}
                    </el-tag>
                  </el-row>
                </div>
                <div v-else>

                  <el-input v-model.trim="formValue.name" :disabled="true"></el-input>
                </div>
              </el-form-item>

              <el-form-item :label="index == 0 ? '处理角色、细类、范围和模版' : ''" v-for="(item, index) in formValue.moudleList">
                <!-- <div> -->
                <el-card style="width: 1800px; margin-bottom: 20px">
                  <div slot="header" style="
                                  display: flex;
                                  justify-content: space-between;
                                  align-items: center;
                                ">
                    <div class="left">

                      <el-form-item :prop="'moudleList.' + index + '.priority'" label="处理角色" style="margin-left: -120px"
                        :rules="[
                            { required: true, message: '请选择处理角色', trigger: 'blur' }
                          ]">
                        <el-select v-model="item.priority" placeholder="请选择处理角色">
                          <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="right">
                      <el-button type="primary" plain @click="addModule(0,item)">新增同角色配置</el-button>
                    </div>
                  </div>
                  <el-form-item :prop="'moudleList.' + index + '.deptList'" label="处理范围" :rules="[
                    { required: true, message: '请选择处理范围', trigger: 'blur' }
                  ]" style="margin-left: -90px;margin-bottom:20px">
                    <div>
                      <el-button @click="addOrg(index)">点击添加</el-button>
                    </div>
                    <div v-show="item.deptList">
                      <div @click="addOrg" class="userBox">
                        <el-tag v-for="(tag, ind) in item.deptList" @close="closeOrgTag(tag, index,ind)"
                          :key="tag.deptId" closable>
                          {{ tag.name}}
                        </el-tag>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item :prop="'moudleList.' + index + '.dicId'" label="细类"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                        { required: true, message: '请选择细类', trigger: 'blur' }
                      ]">
                    <el-cascader ref="demoCascader" class="classifyList" v-model="item.dicId"
                      :options="classifyOptionsChild" :props="{
                      multiple: true,
                      checkStrictly: true,
                      children: 'childrens',
                      label: 'dicValue',
                      value: 'id'
                    }" @change="classifyChange($event,index)"></el-cascader>
                  </el-form-item>
                  <el-form-item :prop="'moudleList.' + index + '.newMultipleSelection'" label="请选择新建模板"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                        { required: true, message: '请选择新建模板', trigger: 'blur' }
                      ]">
                    <el-select v-model="item.newMultipleSelection" multiple placeholder="请选择新建模板"
                      @focus="selectTemp(item.dicId,index,0)">
                      <el-option v-for="ele in item.newMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
                        <span style="float: left">{{ ele.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item :prop="'moudleList.' + index + '.turnMultipleSelection'" label="请选择转单模板"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                          { required: true, message: '请选择转单模板', trigger: 'blur' }
                        ]">
                    <el-select v-model="item.turnMultipleSelection" multiple placeholder="请选择转单模板"
                      @focus="selectTemp(item.dicId,index,1)">
                      <el-option v-for="ele in item.turnMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
                        <span style="float: left">{{ ele.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :prop="'moudleList.' + index + '.handleMultipleSelection'" label="请选择处理模板"
                    style="margin-left: -90px;margin-bottom:20px" :rules="[
                       { required: true, message: '请选择处理模板', trigger: 'blur' }
                     ]">
                    <el-select v-model="item.handleMultipleSelection" multiple placeholder="请选择处理模板"
                      @focus="selectTemp(item.dicId,index,2)">
                      <el-option v-for="ele in item.handleMoudle" :key="ele.id" :label="ele.name" :value="ele.id">
                        <span style="float: left">{{ ele.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ ele.applyClassification }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <div v-if="formValue.moudleList.length>1" style="float:right;margin-bottom:30px">
                    <el-button type="primary" plain @click="delModule(index)">删除</el-button>
                  </div>
                </el-card>

                <div v-if="index == formValue.moudleList.length - 1">
                  <el-button type="primary" plain @click="addModule(1)">新增角色配置</el-button>
                </div>
              </el-form-item>

              <!-- 提交 -->
              <el-form-item label="">
                <el-row>
                  <el-col style="padding-bottom: 30px">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="
                    () => {
                      $router.back(-1)
                    }
                  ">返回
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>

注意:

1:当validate、resetFields 的方法时，props属性是必填的,props与data中需要定义的model的键名一致，
2:data中需要定义model绑定的对应字段 否则validate、resetFields方法不会生效
3.不论el-form-item的组件是何种类型，只要满足1,2均可校验，不局限于el-elemntui的el-form常用那几种，如(自定义组织架构树也可以进行校验)

form: {
            isArea: '0',
            isGrade: '1',
            period: '',
            // eliminateHoliday: 0,
            overLimit: '',
            overUnit: '',
            moudleArea: [{
              areaDeptIds: [],
              period: '',
              overLimit: '',
              eliminateHoliday: 0,
              timeRangeList: [{
                time: '',
              }],
              overtimeHandlerList: [{
                overLimit: '',
              }]
            }],
          },

3:特别要注意 . 的添加位置 ，至于为什么要这样写呢 (其实就是获取对象属性的方式===>通过.或者索引去获取)通过打印校验我们会发现以下得到的是类似这样的数据
moudleArea.0.overtimeHandlerList.0.overLimit
如果index和属性之间不加.去获取 则得到的是moudleArea.0overtimeHandlerList.0.overLimit这样 这样明显是错误的获取不到我们想要的属性

很简单的却也是很容易忽略的地方

:prop="'moudleArea.' + index + '.overtimeHandlerList.'+ ind+ '.overLimit'"

4:当校验的内容中有条件渲染的时候，请将v-show换成‘v-if’，否则会导致v-show隐藏的部分不需要校验，但是页面提交时校验结果一直为false

动态校验规则写法
写法一

  在标签处写rule校验逻辑
  <el-form-item
                label=""
                :prop="'multiConditions.' + index + '.conditions.' + ind + '.value'"
                v-if="ele.field == 'FINAL_SCORE'"
                :rules="[{ validator: validateFinalScore, trigger: 'change' }]"
              >
                <el-input-number
                  v-model="ele.value"
                  placeholder="支持填写数字"
                  style="width: 180px"
                />
              </el-form-item>

写法二
在数据层定义规则

   <el-form-item
                :prop="'baseConditionList.' + index + '.compareToTargetValueStep'"
                :rules="dataRules.compareToTargetValueStep"
              >
                <el-input
                  v-model="item.compareToTargetValueStep"
                  controls-position="right"
                  style="width: 70px"
                />
              </el-form-item>
   const dataRules = reactive<ElRules>({
    scoreLimit: [{ validator: validateValue, trigger: 'change' }],
    compareToTargetValueStep: [{ validator: validateValue, trigger: 'change' }],
    score: [{ validator: validateValue, trigger: 'change' }],
    stepScore: [{ validator: validateValue, trigger: 'change' }],
    scoreUpperLimit: [{ validator: validateValue, trigger: 'change' }],
    scoreLowerLimit: [{ validator: validateValue, trigger: 'change' }],
  })

前提: