antdv form表单动态添加以及验证表单

HTML部分

 <a-form-model
  ref="form"
  :model="params"
  :label-col="{ span: 2, sm: { span: 2 } }"
  labelAlign="left"
>
  <a-form-model-item label="活动名称">
    <a-input style="width:500px" v-model="params.geekName" />
  </a-form-model-item>
  <a-form-model-item label="奖励设置">
    <div v-for="(item, index) in params.geekGeekRuleVoList" :key="index">
      <a-row>
        <a-col :span="1" :style="{ 'margin-left': index !== 0 ? '8.4%' : '' }">
          <span>第{{ item.orderNumName }}名</span>
        </a-col>
        <a-col :span="3">
          <!-- 奖品类型 -->
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeType'"
            :rules="[{ required: true, message: '不能为空', trigger: 'change' }]"
          >
            <a-select
              v-model="item.prizeType"
            >
              <a-select-option value="1">现金 </a-select-option>
              <a-select-option value="2">商品</a-select-option>
              <a-select-option value="3">券</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <!-- 现金金额 -->
        <a-col :span="3" v-if="item.prizeType == 1">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeAmount'"
            :rules="{
              required: true,
              message: '不能为空',
              trigger: 'blur',
            }"
          >
            <a-input
              v-model.trim="item.prizeAmount"
              class=""
              placeholder="请输入"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <!-- 券或者商品名称 -->
        <a-col :span="4" v-if="item.prizeType == 2 || item.prizeType == 3">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeName'"
            :rules="{
              required: true,
              max: 5,
              message: '长度不能大于5',
              trigger: 'blur',
            }"
          >
            <a-input
              v-model="item.prizeName"
              class=""
              placeholder="最多只能输入5个字符"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <!-- 选择商品或者券 -->
        <a-col :span="5" v-if="item.prizeType == 2">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeId'"
            :rules="{
              required: true,
              message: '不能为空',
              trigger: 'change',
            }"
          >
            <a-select
              show-search
              class=""
              v-model="item.prizeId"
              placeholder="选择商品"
              :filterOption="filterOption"
            >
              <a-select-option
                v-for="(item, index) in goodsListData"
                :value="item.id"
                :key="index"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="5" v-if="item.prizeType == 3">
          <a-form-model-item
            :prop="'geekGeekRuleVoList.' + index + '.prizeId'"
            :rules="{
              required: true,
              message: '不能为空',
              trigger: 'change',
            }"
          >
            <a-select
              show-search
              class=""
              v-model="item.prizeId"
              placeholder="选择券"
              :filterOption="filterOption"
            >
              <a-select-option
                v-for="(item, index) in templateData"
                :value="item.id"
                :key="index"
              >
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-button type="danger" style="margin-left:10px" @click="onRemove(index)">
            <a-icon type="minus-circle-o" />
          </a-button>
        </a-col>
      </a-row>
    </div>
  </a-form-model-item>
  <div style="margin-bottom: 10px;">
    <a-button style="width:80px" type="primary" @click="onAdd">
      <a-icon type="plus" />
    </a-button>
  </div>
  <a-form-model-item label="奖励说明">
    <a-input
      style="width:500px"
      :auto-size="{ minRows: 3, maxRows: 5 }"
      v-model="params.ruleSet"
      type="textarea"
    />
  </a-form-model-item>
  <a-form-model-item label="活动规格">
    <a-input
      style="width:500px"
      :auto-size="{ minRows: 3, maxRows: 5 }"
      v-model="params.ruleSetDesc"
      type="textarea"
    />
  </a-form-model-item>
  <a-form-model-item label="活动时间：">
    <a-range-picker
      v-model="timeData"
      :show-time="{ format: 'YYYY-MM-DD' }"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      :placeholder="['开始时间', '结束时间']"
      @change="onChange"
      :disabledDate="disabledDate"
      @ok="onOk"
    />
  </a-form-model-item>
  <a-button type="primary" html-type="submit" @click="submitForm">
    提交
  </a-button>
</a-form-model>

js部分

export default {
    name: 'detailsComp',
    data() {
        return {
          params: {
            geekName: '',
            ruleSet: '',
            ruleSetDesc: '',
            geekBeginDate: '',
            geekEndDate: '',
            geekType: null,
            geekGeekRuleVoList: [
              {
                orderNumName: '一', // 名次
                orderNum: '1',
                prizeType: '', //1=现金，2=实物，3=券
                prizeAmount: '', // 现金金额
                prizeName: '', // 奖励物品名称
                prizeNum: '1', // 数量
                prizeId: '', // 物品id
              },
            ],
          },
          timeData: null,
        };
      },
}
methods:{
     onAdd() {
      this.params.geekGeekRuleVoList.push({
        orderNumName: '', // 名次
        orderNum: '',
        prizeType: '', //1=现金，2=实物，3=券
        prizeAmount: '', // 现金金额
        prizeName: '', // 奖励物品名称
        prizeNum: '1', // 数量
        prizeId: '', // 物品id
      });
    },
    onRemove(index) {
      if (index == 0) {
        this.$message.error('不能删除第一个哦!');
        return false;
      }
      this.params.geekGeekRuleVoList.splice(index, 1);
    },
      submitForm(formName) {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$emit('submitBtn', this.params);
            } else {
              console.log('error submit!!');
              return false;
            }
          });
    },
}