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>

　　主要內容

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