新增一个数组传递给后端

实现的效果：

页面

bash 复制代码

<div style="margin-bottom: 10px" v-if="totalPrice">
           <p style="font-weight: bolder;margin-bottom: 10px">
             支付计划
             <el-button type="text" size="small" @click="addPayInfo" icon="el-icon-plus">添加</el-button>
           </p>
           <ul v-for="(p,i) of payList" :key="i" class="pay-info">
            <li>
              <span>第{{i+1}}笔支付金额:</span>
              <el-input v-model="p.price"
                        @input="handleInput($event,i,'pay');onCalculate(p,i,createParams.commodityList[0].price)"
                        :disabled="!mark && p.is_amend"
                        style="width: 200px;margin-right: 10px" size="small"></el-input>
            </li>
             <li>
               <el-switch
                 style="display: block"
                 v-model="p.is_pay"
                 :disabled="!mark && p.is_amend"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
                 active-text="已支付"
                 inactive-text="未支付">
               </el-switch>
             </li>
             <li>
               <span style="vertical-align: top">备注：</span>
               <el-input type="textarea" v-model="p.desc" :disabled="!mark && p.is_amend" style="width: 200px;margin-right: 10px" size="small"></el-input>
             </li>
             <li>
               <el-button type="danger" size="mini" @click="deletePayInfo(i)" :disabled="!mark && p.is_amend" v-if="payList.length>1">删除</el-button>
             </li>
           </ul>
           <div>
             <span>需支付总价：{{totalPrice}}元</span>
             <span style="margin-left: 20px;color:#67C23A ">已计划支付总价：{{payTotal}}元</span>
             <span style="margin-left: 20px;color:#F56C6C " >未计划支付总价：
               <span style="color: #409EFF;cursor: pointer" @click="showUnPayTotal(unPayTotal)">{{unPayTotal}}</span>
               元</span>
           </div>
         </div>

bash 复制代码

data:{
  totalPrice : 300 //总金额
  payList : [
     {
          price: '',
          desc:'',
          is_pay: false
      }
       ] //传递给后端的数组
}

数组内增加数据

bash 复制代码

addPayInfo(){
      this.payList.push({
        price: '',
        desc:'',
        is_pay: false
      })
    },

数组内删除数据

bash 复制代码

deletePayInfo(i){
      this.payList.splice(i,1)
      let sum = this.payList.reduce(function(acc, obj) {
        return acc + Number(obj.price);
      }, 0);
      this.payTotal = sum>Number(totalPrice)?0:sum
      this.unPayTotal = Number(totalPrice) - this.payTotal
    },

剩余金额点击后直接赋值到未输入金额的输入框内

bash 复制代码

  showUnPayTotal(val){
      console.log(val)
      if(val>0 && this.payList.find(item=>item.price==='')){
        this.payList.find(item=>item.price==='').price = val
        this.unPayTotal = 0
      }
    },

输入框值改变后执行

bash 复制代码

    handleInput(val,index,type){
      let dat = ("" + val) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
      if(type==='commodity'){
        this.totalPrice = dat
        this.unPayTotal = Number(dat) - this.payTotal
      }else if(type==='pay'){
        this.payList[index].price = dat
      }
    },