解决vue 表格table列求和的问题
更新时间：2019年11月06日 16:47:28 作者：panyox
今天小编就为大家分享一篇解决vue 表格table列求和的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在给朋友做一个项目，因为是B端，所以少不了表格。
本身就用了element-ui，但是订单管理有个需求使用element-ui table组件实现不了，只能退而求其之用了原生的table，功能是几乎满足需求了，但是还有个小问题就是列求和没搞定，这可咋整啊。看了element-ui是有这么个功能，遂翻开源码看了下也没看出啥话头，心想算了，自己来实现，网上搜了下，偶然看到一位仁兄的写法，拿过来稍微修改了下，果真是有用，在此感谢那位仁兄！（我本身对前端不专业，侧后端）
下面贴代码：
/**
javascript 部分
order.prods 是产品数组，即你要统计的那组数组
prod_amount 是计算的列名，我这里指的是商品数量
row.prod_amount*row.prod_price 这里我是要计算商品金额（单价*数量）所以这样写，如果你是计算其他，那就跟上面的商品数量一样直接写列名
**／
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显示计算结果部分
<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列求和的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目不能使用localhost访问的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue使用Highcharts实现3D饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue组件封装之dialog对话框组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目，那么应该如何封装，本文就介绍一下如何封装，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在vue中最常用的应该就是axios了，这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述，提前安装一下也不用我说了吧2021-06-06
这篇文章主要介绍了vue this.$toast 失效问题汇总,本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2024-03-03
vue打包后dist目录下的index.html网页显示空白的问题(两种方案)
本文主要介绍了vue打包后dist目录下的index.html网页显示空白的问题,主要介绍了两种方式,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了vue地址栏直接输入路由无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了vue+Element实现登录随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论