解決vue 表格table列求和的問(wèn)題
最近在給朋友做一個(gè)項(xiàng)目，因?yàn)槭荁端，所以少不了表格。
本身就用了element-ui，但是訂單管理有個(gè)需求使用element-ui table組件實(shí)現(xiàn)不了，只能退而求其之用了原生的table，功能是幾乎滿足需求了，但是還有個(gè)小問(wèn)題就是列求和沒(méi)搞定，這可咋整啊?？戳薳lement-ui是有這么個(gè)功能，遂翻開(kāi)源碼看了下也沒(méi)看出啥話頭，心想算了，自己來(lái)實(shí)現(xiàn)，網(wǎng)上搜了下，偶然看到一位仁兄的寫法，拿過(guò)來(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é)果部分
<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列求和的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在項(xiàng)目中使用ref時(shí)有時(shí)候直接取值,有時(shí)候返回的卻是一個(gè)數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧2023-11-11
基于Vue3實(shí)現(xiàn)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm的詳細(xì)過(guò)程
這篇文章主要介紹了基于Vue3實(shí)現(xiàn)一個(gè)前端埋點(diǎn)上報(bào)插件并打包發(fā)布到npm,本項(xiàng)目采用pnpm進(jìn)行Monorepo環(huán)境搭建,因?yàn)槲磥?lái)這個(gè)項(xiàng)目可能會(huì)加入更多的工具包，需要的朋友可以參考下2022-10-10
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來(lái)完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
基于Vue 擼一個(gè)指令實(shí)現(xiàn)拖拽功能
這篇文章主要介紹了Vue 指令實(shí)現(xiàn)拖拽功能,實(shí)現(xiàn)原理很簡(jiǎn)單，文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue-devtools?開(kāi)發(fā)工具插件之支持vue3?chrome?瀏覽器插件
這篇文章主要介紹了vue-devtools?開(kāi)發(fā)工具插件之支持vue3?chrome?瀏覽器插件,用這個(gè)版本主要是為了支持vue3?推薦直接下載，文中給大家提供了下載地址，感興趣的朋友跟隨小編一起看看吧2022-01-01
基于Vuejs實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購(gòu)物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實(shí)現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04