zoukankan      html  css  js  c++  java
  • 分期付款

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

    我是这样做的

    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 
          });
        }
    

      最后展示的结果

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

  • 相关阅读:
    7-30-组队赛
    POJ 3125 Printer Queue
    7-28-比赛
    POJ 3922 A simple stone game
    POJ 1845
    第一次组队训练
    I-number
    Radar Installation
    Robots on a grid(DP+bfs())
    Dividing a Chocolate(zoj 2705)
  • 原文地址:https://www.cnblogs.com/yishifuping/p/10957537.html
Copyright © 2011-2022 走看看