新增一个数组传递给后端

实现的效果:

页面

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
      }
    },
相关推荐
Tttian62236 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
cccyi71 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
拾光拾趣录3 小时前
虚拟DOM超详细流程
前端·vue.js·dom
拾光拾趣录3 小时前
Vue 项目监听页面 Hash 变化
前端·vue.js·vue-router
梨子同志3 小时前
Vue Options API vs Composition API
前端·vue.js
梨子同志4 小时前
Vue v-model 指令详解
前端·vue.js
天若有情6734 小时前
Node.js 是什么?npm 是什么? Vue 为什么需要他们?
vue.js·npm·node.js
雲墨款哥4 小时前
Vue 3 响应式黑魔法:ITERATE_KEY 如何解决新增属性的响应性难题
vue.js·面试