分期付款

今天来分享一段代码，业务需求是这样的，要做一个分期付款的提交，但分期没有定固定的多少期，要让你随时能够添加，页面开始的时候要展示第一期的填空，随后才进行添加

我是这样做的

vue组件

 <el-form :model="payment" 
             :rules="rules" 
             hide-required-asterisk>
      <!-- 分期付款 -->
      <el-form-item label="分期付款"
                    class="aging">
        <br>
        <el-form-item
              label="乙方(一期款含定金）"
              :rules="rules.proxyPerson">
              <el-input v-model="payment.firstPayment" 
                        @blur="refunds"
                        placeholder="请输入一期款(含定金)">
              </el-input>
        </el-form-item>
        <el-form-item
              v-for="(domain, index) in payment.domains"
              :label="'乙方('+domain.code+'期款）'"
              :key="domain.key"
              :prop="'domains.' + index + '.firstPayment'"
              :rules="rules.proxyPerson">
              <el-input v-model="domain.firstPayment" 
                        :data-content = domain.code
                        @blur="refund"
                        :placeholder="'请输入'+domain.code+'期款'">
              </el-input>
        </el-form-item>
        <!-- 添加按钮 -->
        <div class="newcrea" @click="button">添加</div>
      </el-form-item>
    </el-form>

　　在data内定义的值

/** 分期还贷 */
            payment:{
                // 一期
                firstPayment:"",
                // 二期开始
                domains: []
            },

　　最后的添加事件

button() {
      this.payment.domains.push({
        firstPayment: "",
        // 第几期
        code:this.payment.domains.length + 2 
      });
    }

　　最后展示的结果

勉强能看，功能正常，谁有更好的办法欢迎来留下言