el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；

场景：本文是两种表单校验
1.对于数组for循环，校验每一项
2.对于两个不同的字段，分别v-if显示隐藏的校验

一、新增和删除表单项，动态校验。

el-form表单动态动态新增表单进行校验。直接参考 动态增减表单项

以下代码可直接复制：重点在于:prop :rules :key

<template>
  <div>

    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="110px" class="demo-dynamic">
      <div class="bor_box" v-for="(domain, index) in dynamicValidateForm.premiumList" :key="domain.key">
        <el-col :span="24">
          <div class="box4_div">

            <el-col :span="5">
              <el-form-item label="保费：" :prop="'premiumList.' + index + '.premium'" :rules="{required: true, message: '保费不能为空', trigger: 'blur'}">
                <el-input class="num_input" placeholder="请输入" v-model="domain.premium"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="保费率：" :prop="'premiumList.' + index + '.rate'" :rules="{required: true, message: '保费率不能为空', trigger: 'blur'}">
                <el-input class="num_input" placeholder="请输入" :precision="2" :step="0.01" v-model="domain.rate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="上游费用率：" :prop="'premiumList.' + index + '.feeRate'" :rules="{required: true, message: '上游费用率不能为空', trigger: 'blur'}">
                <el-input class="num_input" placeholder="请输入" :max="100" v-model="domain.feeRate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="上游费用额：" :prop="'premiumList.' + index + '.fee'" :rules="{required: true, message: '上游费用额不能为空', trigger: 'blur'}">
                <el-input class="num_input" placeholder="请输入" v-model="domain.fee"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-button @click.prevent="removeDomain(domain,index)">删除</el-button>
            </el-col>

          </div>
        </el-col>

      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
          <el-button @click="addDomain">添加保费</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>

      </div>

    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dynamicValidateForm: {
        premiumList: [{
          selected: 'Y', premium: undefined, rate: undefined, feeRate: undefined, fee: undefined, baofei1_unit: '', shangyoufeiyonge_unit: '', downRate: undefined, downFee: undefined, xiayoufeiyonge_unit: '',
        }],

      },
    }
  },
  created () {

  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain (item, index) {
      if (index !== 0) {
        this.dynamicValidateForm.premiumList.splice(index, 1)
      }
    },

    addDomain () {

      this.dynamicValidateForm.premiumList.push({
        selected: 'N', premium: undefined, rate: undefined, feeRate: undefined, fee: undefined, baofei1_unit: '', shangyoufeiyonge_unit: '', downRate: undefined, downFee: undefined, xiayoufeiyonge_unit: '',
        key: Date.now()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.bor_box {
  margin-left: 50px;
  margin-bottom: 10px;

  overflow: hidden;
}
</style>

二、el-form表单校验v-if不生效、el-form表单校验v-show不生效：

例如有个表单项，通过控制显示两个不同的表单项内容，分别需要校验对应的表单项即可。
如果是直接用v-if，会发现切换时候，校验不生效；
如果直接使用v-show，又发现即使不切换，隐藏了另外的表单项，也会触发校验规则。
正确做法是：使用v-if控制表单项的显示隐藏，同时需要给el-form-item加上自己的 prop=" " 和 key=" " ，这样才能区分。当然:rules 也要有自己对应的提示。

    <template v-if="flag">
      <el-form-item label="姓名：" prop="name" key="name" :rules="rules.name">
        <el-input v-model="formData.name" placeholder=""></el-input>
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item label="退回原因：" prop="desc" key="desc" :rules="rules.desc">
        <el-input type="textarea" maxlength="500" show-word-limit v-model="formData.desc" placeholder="请填写退回原因"></el-input>
      </el-form-item>
    </template>