解决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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JS实现日期加减的方法
Nov 29 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Node.js Buffer用法解读
May 18 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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面向对象编程快速入门
2006/12/14 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php实现简易计算器
2020/08/28 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
理解javascript封装
2016/02/23 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Vue组件开发初探
2017/02/14 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
党性教育心得体会
2014/09/03 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
行政复议决定书
2015/06/24 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL