解决vue 表格table列求和的问题


Posted in Javascript onNovember 06, 2019

最近在给朋友做一个项目,因为是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 表格table列求和的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Vue组件的使用教程详解
Jan 05 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
JavaScript如何借用构造函数继承
Nov 06 #Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 #Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 #Javascript
vue点击页面空白处实现保存功能
Nov 06 #Javascript
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中的事务使用实例
2015/05/26 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue跨域解决方法
2017/10/15 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python实现简单成绩录入系统
2019/09/19 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python插件机制实现详解
2020/05/04 Python
Python urllib3软件包的使用说明
2020/11/18 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
高一军训的心得体会
2014/09/01 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
八一建军节慰问信
2015/02/14 职场文书
总经理聘用协议书
2015/09/21 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
html实现随机点名器的示例代码
2021/04/02 Javascript
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js