解決vue 表格table列求和的問題
最近在給朋友做一個(gè)項(xiàng)目，因?yàn)槭荁端，所以少不了表格。
本身就用了element-ui，但是訂單管理有個(gè)需求使用element-ui table組件實(shí)現(xiàn)不了，只能退而求其之用了原生的table，功能是幾乎滿足需求了，但是還有個(gè)小問題就是列求和沒搞定，這可咋整啊?？戳薳lement-ui是有這么個(gè)功能，遂翻開源碼看了下也沒看出啥話頭，心想算了，自己來實(shí)現(xiàn)，網(wǎng)上搜了下，偶然看到一位仁兄的寫法，拿過來稍微修改了下，果真是有用，在此感謝那位仁兄！（我本身對(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é)果部分
<tr>
<td>合計(jì)</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列求和的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目不能使用localhost訪問的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪問的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue使用Highcharts實(shí)現(xiàn)3D餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)3D餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue組件封裝之dialog對(duì)話框組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
因?yàn)楝F(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項(xiàng)目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在vue中最常用的應(yīng)該就是axios了，這是一個(gè)很強(qiáng)大的處理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)頁顯示空白的問題,主要介紹了兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了vue地址欄直接輸入路由無效問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04