el-form中如何动态添加删除el-form-item数据

<template>
  <el-row style="margin-top: 100px;">
    <el-col :span="24">
      <el-form ref="discountStoreFrombs" :model="discountStoreFrombs" label-width="100px">
        <el-form-item label="折扣价格定金比例" prop="discountPercent" v-if="saletype == 'PRESALE' || saletype == 'SPECIAL'">
          <el-select v-model="discountStoreFrombs.discountPercent" placeholder="请选择定金比例" clearable style="width: 100%">
            <el-option v-for="dict in percentOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <!-- 中间操作按钮-start -->
      <el-row :gutter="10" class="mb20">
        <el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加折扣价格</el-button></el-col>
      </el-row>
      <!-- 中间操作按钮-end -->
    </el-col>

    <el-col :span="24">
      <el-form ref="discountStoreFrom" :model="discountStoreFrom" label-width="100px">
        <el-row id="discountStore">
          <!-- 折扣店铺-start -->
          <template v-for="(store, index) in discountStoreFrom">
            <el-col :span="24">
              <div class="discount-title">
                <span>折扣价格</span>
                <el-button v-if="index > 0" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(index)">删除</el-button>
              </div>
              <el-form-item label="折扣价格" :prop="'' + index + '.discountPrice'">
                <el-input v-model="store.discountPrice" placeholder="请输入折扣价格" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="折扣店铺" :prop="'' + index + '.merchantIds'">
                <el-checkbox-group v-model="store.merchantIds">
                  <el-checkbox :disabled="false" v-for="checkbox in merchantArr" :label="checkbox.merchantId" :key="checkbox.merchantId" name="type">
                    {{ checkbox.shopName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </template>
          <!-- 折扣店铺-end -->
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24" style="text-align: center;">
      <el-button @click="prevStep(3)">上一步</el-button>
      <el-button type="primary" @click="nextStep(5)">提交</el-button>
    </el-col>
  </el-row>
</template>

<script>
import { discountStoreChecked } from '@/api/retailers/retailers.js';
import { selectEpositrate } from '@/api/goodsmanage/depositrate.js';
export default {
  props: {
    saletype: undefined //发售类型
  },
  data() {
    return {
      //定金比例
      percentOptions: null,
      discountStoreFrombs: {
        discountPercent: undefined //折扣价格定金比例Id
      },
      discountStoreFrombsRules: {
        discountPercent: [{ required: true, message: '请选择定金比例', trigger: 'change' }]
      },
      //折扣店铺
      merchantArr: null,
      tempmerchantIds: [],
      //添加的折扣店铺数量
      discountStoreCount: 1,
      tempDiscountStoreFromArr: [
        {
          discountPrice: undefined, //折扣价格
          merchantIds: [] //折扣店铺ID
        }
      ],
      //折扣店铺数据
      discountStoreFrom: {},
      //折扣店铺数据校验
      discountStoreFromRules: {}
    };
  },
  watch: {
    saletype() {
      this.discountStoreFrombs['discountPercent'] = undefined;
    }
  },
  mounted() {
    this.merchantListFun();
    this.arrayToObject();
    //获取定金比例
    this.getSelectEpositrate();
  },
  methods: {
    /**上一步*/
    prevStep(step) {
      this.$emit('nextStep', {
        step: step
      });
    },
    /**下一步*/
    nextStep(step) {
      const discountStoreFrombs = this.discountStoreFrombs;
      this.$refs['discountStoreFrombs'].validate(valid => {
        if (valid) {
          console.log('[]', discountStoreFrombs);
        }
      });

      const discountStoreFrom = this.discountStoreFrom;
      console.log('[商品属性]', discountStoreFrom);
      let tempVerify = [];
      for (let i in discountStoreFrom) {
        console.log(discountStoreFrom[i].merchantIds);
        for (let j = 0; j < discountStoreFrom[i].merchantIds.length; j++) {
          tempVerify.push(discountStoreFrom[i].merchantIds[j]);
        }
      }
      if (this.isRepeatFun(tempVerify)) {
        this.$message({
          message: '警告哦，一个折扣店铺同时只能享受一个折扣价格',
          type: 'warning'
        });
        return false;
      }
      this.$refs['discountStoreFrom'].validate(valid => {
        if (valid) {
          this.$emit('nextStep', {
            step: step
          });
        }
      });
    },
    /**新增折扣价格*/
    handleAdd() {
      this.tempDiscountStoreFromArr.push({
        discountPrice: undefined, //折扣价格
        merchantIds: [] //折扣店铺ID
      });
      this.arrayToObject();
    },
    /**获取折扣店铺数据*/
    merchantListFun() {
      let goodsTypeId = '1'; //一类商品id 游戏王 1 万代 2 卡牌 3 动漫周边23
      discountStoreChecked(goodsTypeId).then(response => {
        console.log('[折扣店铺]', response);
        this.merchantArr = response.data;
      });
    },
    /**把数组转换成object*/
    arrayToObject() {
      let tempDiscountStoreFromArr = this.tempDiscountStoreFromArr;
      let tempObj = {};
      let tempObjRules = {};
      tempDiscountStoreFromArr.forEach((item, index) => {
        tempObj[index] = item;
        tempObjRules[index] = {
          discountPrice: [{ required: true, message: '请输入折扣价格', trigger: 'blur' }]
        };
      });
      this.discountStoreFrom = tempObj;
      this.discountStoreFromRules = tempObjRules;
    },
    /**删除新增标签*/
    handleDelete(index) {
      let tempDiscountStoreFromArr = this.tempDiscountStoreFromArr;
      tempDiscountStoreFromArr.splice(index, 1);
      this.arrayToObject();
    },
    /**判断数组中是否有重复数据*/
    isRepeatFun(a) {
      return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test('\x0f' + a.join('\x0f\x0f') + '\x0f');
    },
    /**定金比例**/
    getSelectEpositrate() {
      selectEpositrate().then(response => {
        console.log('[定金比例]', response);
        this.percentOptions = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.discount-title {
  width: 100%;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
</style>