解決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)上搜了下，偶然看到一位仁兄的寫法，拿過來稍微修改了下，果真是有用，在此感謝那位仁兄！（我本身對前端不專業(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)文章
在項目中使用ref時有時候直接取值,有時候返回的卻是一個數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧2023-11-11
基于Vue3實現(xiàn)前端埋點上報插件并打包發(fā)布到npm的詳細(xì)過程
這篇文章主要介紹了基于Vue3實現(xiàn)一個前端埋點上報插件并打包發(fā)布到npm,本項目采用pnpm進行Monorepo環(huán)境搭建,因為未來這個項目可能會加入更多的工具包，需要的朋友可以參考下2022-10-10
bpmn.js是一個BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue3+echarts5踩坑以及resize方法報錯的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue 指令實現(xiàn)拖拽功能,實現(xiàn)原理很簡單，文中通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
element中TimePicker時間選擇器禁用部分時間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時間選擇器禁用部分時間(顯示禁用到分鐘)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件
這篇文章主要介紹了vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件,用這個版本主要是為了支持vue3?推薦直接下載，文中給大家提供了下載地址，感興趣的朋友跟隨小編一起看看吧2022-01-01
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04