解決vue 表格table列求和的問題
更新時間：2019年11月06日 16:47:28 作者：panyox
今天小編就為大家分享一篇解決vue 表格table列求和的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在給朋友做一個項目，因為是B端，所以少不了表格。
本身就用了element-ui，但是訂單管理有個需求使用element-ui table組件實現(xiàn)不了，只能退而求其之用了原生的table，功能是幾乎滿足需求了，但是還有個小問題就是列求和沒搞定，這可咋整啊?？戳薳lement-ui是有這么個功能，遂翻開源碼看了下也沒看出啥話頭，心想算了，自己來實現(xiàn)，網(wǎng)上搜了下，偶然看到一位仁兄的寫法，拿過來稍微修改了下，果真是有用，在此感謝那位仁兄?。ㄎ冶旧韺η岸瞬粚I(yè)，側(cè)后端）
下面貼代碼：
/**
javascript 部分
order.prods 是產(chǎn)品數(shù)組，即你要統(tǒng)計的那組數(shù)組
prod_amount 是計算的列名，我這里指的是商品數(shù)量
row.prod_amount*row.prod_price 這里我是要計算商品金額（單價*數(shù)量）所以這樣寫，如果你是計算其他，那就跟上面的商品數(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顯示計算結(jié)果部分
<tr>
<td>合計</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div>{{sumAmount.toFixed(2)}}</div></td>
<td></td>
<td></td>
<td><div class="order-payment"><span class="money">{{sumMoney.toFixed(2)}}元</span></div></td>
</tr>
效果圖：
以上這篇解決vue 表格table列求和的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目不能使用localhost訪問的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了vue使用Highcharts實現(xiàn)3D餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue組件封裝之dialog對話框組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
因為現(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在vue中最常用的應(yīng)該就是axios了，這是一個很強大的處理ajax的庫。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述，提前安裝一下也不用我說了吧2021-06-06
這篇文章主要介紹了vue?this.$toast?失效問題匯總,本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2024-03-03
vue打包后dist目錄下的index.html網(wǎng)頁顯示空白的問題(兩種方案)
本文主要介紹了vue打包后dist目錄下的index.html網(wǎng)頁顯示空白的問題,主要介紹了兩種方式,具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了vue地址欄直接輸入路由無效問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)登錄隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04