vue element-ui 動態添加表單與刪除

<template>
<span>付款階段</span>
      <div class="box">
        <el-row>
          <el-col :span="8" style="padding-left:30px">
            <el-button type="primary" @click="newlyAdded">新增階段</el-button>
          </el-col>
        </el-row>
        <el-row v-for="(domain, index) in ruleForm.payListEntity" :key="index+1">
          <el-col :span="24">
            <el-row>
              <el-col :span="8">
                <p>階段{{index+1}}</p>
              </el-col>
            </el-row>
            <el-row class="PaymentpayListEntity">
              <el-col :span="6">
                <el-form-item
                  label="階段名稱："
                  :prop="'payListEntity.'+index+'.stage'"
                  :rules="moreNotifyOjbectRules.stageVerification"
                >
                  <el-input v-model="domain.stage" placeholder="開始階段"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="付款時間："
                  :prop="'payListEntity.'+index+'.planpaydate'"
                  :rules="moreNotifyOjbectRules.planpaydateVerification"
                >
                  <el-date-picker v-model="domain.planpaydate" type="date"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="付款金額："
                  :prop="'payListEntity.'+index+'.amount'"
                  :rules="moreNotifyOjbectRules.amountVerification"
                >
                  <el-input v-model="domain.amount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item
                  label="付款比例："
                  :prop="'payListEntity.'+index+'.rate'"
                  :rules="moreNotifyOjbectRules.rateVerification"
                >
                  <el-input v-model="domain.rate"></el-input>%
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <i class="el-icon-close" @click.prevent="removeDomain(domain)"></i>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
</template>



// 刪除本行
    removeDomain(item) {
      var index = this.ruleForm.payListEntity.indexOf(item);
      if (index !== -1) {
        this.ruleForm.payListEntity.splice(index, 1);
      }
    }