最近在給朋友做一個(gè)項(xiàng)目，因?yàn)槭荁端，所以少不了表格。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的杏花嶺網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

本身就用了element-ui，但是訂單管理有個(gè)需求使用element-ui table組件實(shí)現(xiàn)不了，只能退而求其之用了原生的table，功能是幾乎滿足需求了，但是還有個(gè)小問題就是列求和沒搞定，這可咋整啊?？戳薳lement-ui是有這么個(gè)功能，遂翻開源碼看了下也沒看出啥話頭，心想算了，自己來(lái)實(shí)現(xiàn)，網(wǎng)上搜了下，偶然看到一位仁兄的寫法，拿過來(lái)稍微修改了下，果真是有用，在此感謝那位仁兄！（我本身對(duì)前端不專業(yè)，側(cè)后端）

下面貼代碼：

/**

javascript 部分

order.prods 是產(chǎn)品數(shù)組，即你要統(tǒng)計(jì)的那組數(shù)組

prod_amount 是計(jì)算的列名，我這里指的是商品數(shù)量

row.prod_amount*row.prod_price 這里我是要計(jì)算商品金額（單價(jià)*數(shù)量）所以這樣寫，如果你是計(jì)算其他，那就跟上面的商品數(shù)量一樣直接寫列名

**／

computed: {
  sumAmount(){
  return this.order.prods.map(
   row=>row.prod_amount).reduce(
   (acc, cur) => (parseFloat(cur) + acc), 0)
  },
  sumMoney(){
  return this.order.prods.map(
   row=>row.prod_amount*row.prod_price).reduce(
   (acc, cur) => (parseFloat(cur) + acc), 0)
  }
 },

//html顯示計(jì)算結(jié)果部分

 合計(jì)
 
 
 
 
 
 
{{sumAmount.toFixed(2)}}
 
 
 
{{sumMoney.toFixed(2)}}元

效果圖：

以上這篇解決vue 表格table列求和的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。