解决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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
简单实现js轮播图效果
Jul 14 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
小程序实现侧滑删除功能
Jun 25 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
require.js中的define函数详解
2017/07/10 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
Python中变量交换的例子
2014/08/25 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
珍爱生命演讲稿
2014/05/10 职场文书
作风建设年活动总结
2014/08/27 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
项目验收申请报告
2015/05/15 职场文书
订货会主持词
2015/07/01 职场文书
创业计划书介绍
2019/04/24 职场文书