vue 动态添加form表单item 校验问题

<template>
  <div>

    <el-form class="card-roll-add-form" :model="addFormParams" ref="addFormParams" label-width="120px" :rules="rules"
             size="mini">

      <el-form-item label="产品名称：" prop="productName">
        <el-input v-model="addFormParams.productName" placeholder="请输入产品名称"></el-input>
      </el-form-item>

      <el-form-item label-width="0" v-for="(item,index) in addFormParams.productList" :key="index">

        <p class="product-title">业务信息{{index+1}}:
          <el-button v-if="addFormParams.productList.length > 1" type="danger" icon="el-icon-delete"
                     @click="deteleType(index)">删除
          </el-button>
          <el-button v-if="index === addFormParams.productList.length - 1 && index < 5" type="primary"
                     icon="el-icon-circle-plus-outline" style="margin-left: 10px;" @click="addType(index)">添加
          </el-button>
        </p>
        <el-form-item label="业务产品："
                      :prop="‘productList.‘+ index + ‘.productType‘"
                      :rules="rules.productType"
        >
          <el-select v-model="addFormParams.productList[index].productType" @change="productChange(index)" clearable
                     placeholder="请选择业务产品">
            <el-option label="检测" value="1"></el-option>
            <el-option label="售后" value="2"></el-option>
            <el-option label="延保" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="业务子类："
                      :prop="‘productList.‘+ index + ‘.productSubType‘"
                      :rules="rules.productSubType"
        >
          <el-select v-model="addFormParams.productList[index].productSubType" clearable placeholder="请选择业务子类">
            <div v-if="addFormParams.productList[index].productType == 1">
              <el-option label="全部" value="1"></el-option>
              <el-option label="初检" value="2"></el-option>
              <el-option label="复核" value="3"></el-option>
              <el-option label="常规复核" value="4"></el-option>
              <el-option label="库融复核" value="5"></el-option>
              <el-option label="业务复核" value="6"></el-option>
              <el-option label="延保复核" value="7"></el-option>
            </div>
            <div v-if="addFormParams.productList[index].productType == 2">
              <el-option label="基础版（普通机油4L）" value="1"></el-option>
              <el-option label="进阶版（合成机油4L）" value="2"></el-option>
            </div>
            <div v-if="addFormParams.productList[index].productType == 3">
              <el-option label="基础班" value="1"></el-option>
              <el-option label="升级版" value="2"></el-option>
              <el-option label="全车版" value="3"></el-option>
            </div>
          </el-select>
        </el-form-item>

        <el-form-item label="卡券类别："
                      :prop="‘productList.‘+ index + ‘.productCardType‘"
                      :rules="rules.productCardType"
        >
          <el-select v-model="addFormParams.productList[index].productCardType" @change="productTypeChange(index)"
                     clearable placeholder="请选择卡券类别">
            <el-option label="折扣券" value="1"></el-option>
            <el-option label="代金券" value="2"></el-option>
            <el-option label="抵用券" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="addFormParams.productList[index].productCardType != 1 && addFormParams.productList[index].productCardType != 3"
          label="卡券内容："
          style="display: inline-block;"
          :prop="‘productList.‘+ index + ‘.productCardAmount‘"
          :rules="rules.productCardAmount1"
        >
          <el-input class="append-input" v-model="addFormParams.productList[index].productCardAmount"
                    placeholder="请输入卡券内容">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item v-if="addFormParams.productList[index].productCardType == 1"
                      label="卡券内容："
                      style="display: inline-block;"
                      :prop="‘productList.‘+ index + ‘.productCardAmount‘"
                      :rules="rules.productCardAmount2"
        >
          <el-input class="append-input" v-model="addFormParams.productList[index].productCardAmount"
                    placeholder="请输入卡券内容">
            <template slot="append">折</template>
          </el-input>
        </el-form-item>

        <el-form-item v-if="addFormParams.productList[index].productCardType == 3"
                      label="卡券内容："
                      :prop="‘productList.‘+ index + ‘.productCardAmount‘"
                      :rules="rules.productCardAmount3"
        >
          <el-input style="display: none;" class="append-input"
                    v-model="addFormParams.productList[index].productCardAmount" placeholder="请输入卡券内容"></el-input>
          <p>仅限1次使用</p>
        </el-form-item>

        <el-form-item label="卡券有效期："
                      :prop="‘productList.‘+ index + ‘.productEffectivePeriod‘"
                      :rules="rules.productEffectivePeriod"
        >
          <el-select v-model="addFormParams.productList[index].productEffectivePeriod" clearable placeholder="请选择卡券有效期">
            <el-option label="1个月" value="1"></el-option>
            <el-option label="2个月" value="2"></el-option>
            <el-option label="3个月" value="3"></el-option>
            <el-option label="6个月" value="6"></el-option>
            <el-option label="一年" value="12"></el-option>
          </el-select>

        </el-form-item>

      </el-form-item>

      <p class="department-title">负责人信息</p>
      <el-form-item label="部门类型：" prop="departmentType">
        <el-select v-model="addFormParams.departmentType" @change="departmentTypeChange" clearable
                   placeholder="请选择部门类型">
          <el-option label="启辕" value="1"></el-option>
          <el-option label="市场" value="2"></el-option>
          <el-option label="合作公司" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="部门名称：" prop="departmentId">
        <el-select v-model="addFormParams.departmentId" @change="departmentIdChange" clearable placeholder="请选择部门名称">
          <el-option v-for="option in store.departNameArr" :key="option.departmentId" :value="option.departmentId"
                     :label="option.departmentName"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户名：" prop="productBusinessLeader">
        <el-select v-model="addFormParams.productBusinessLeader" @change="departmentUserChange" filterable
                   placeholder="请选择用户名">
          <el-option v-for="option in store.departUserArr" :key="option.userId" :value="option.userId"
                     :label="`${option.accountRealName}(${option.phone})`"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div style="margin-left: 120px;">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: ‘addCardRollProduct‘,
    data() {
      return {
        addFormParams: {        
          productName: ‘‘,
          productList: [
            {
              productType: ‘‘,
              productSubType: ‘‘,
              productCardType: ‘‘,
              productCardAmount: ‘‘,
              productEffectivePeriod: ‘‘
            }
          ],
          departmentType: ‘‘,
          departmentId: ‘‘,
          productBusinessLeader: ‘‘
        },
        rules: {
          productName: [
            {required: true, message: ‘请输入产品名称‘, trigger: ‘change‘},
            {max: 14, message: ‘最多14个字‘, trigger: ‘change‘}
          ],
          productType: [
            {required: true, message: ‘请选择业务产品‘, trigger: ‘change‘}
          ],
          productSubType: [
            {required: true, message: ‘请选择业务子类‘, trigger: ‘change‘}
          ],
          productCardType: [
            {required: true, message: ‘请选择卡券类型‘, trigger: ‘change‘}
          ],
          productCardAmount1: [
            {required: true, message: ‘请输入卡券内容‘, trigger: ‘blur‘},
            {pattern: /^[1-9]([0-9]){0,3}$/, message: ‘请输入1-9999之间整数‘}
          ],
          productCardAmount2: [
            {required: true, message: ‘请输入卡券内容‘, trigger: ‘blur‘},
            {pattern: /^([1-10]|10.0|10.00|([1-9](\.\d{0,2})))$/, message: ‘请输入1-10之间,最多保留两位小数‘}
          ],
          productCardAmount3: [
            {required: true, message: ‘请输入卡券内容‘, trigger: ‘blur‘}
          ],
          productEffectivePeriod: [
            {required: true, message: ‘请选择有效期‘, trigger: ‘change‘}
          ],
          departmentType: [
            {required: true, message: ‘请选择部门类型‘, trigger: ‘change‘}
          ],
          departmentId: [
            {required: true, message: ‘请选择部门名称‘, trigger: ‘change‘}
          ],
          productBusinessLeader: [
            {required: true, message: ‘请选择用户名‘, trigger: ‘change‘}
          ]
        }
      }
    }
  };
</script>