解决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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
vue中的使用token的方法示例
Mar 10 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
PHP4中session登录页面的应用
2008/07/25 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP实现的json类实例
2015/07/28 PHP
Javascript - HTML的request类
2007/01/09 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
体育专业个人求职信范文
2013/12/27 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
新郎答谢词
2015/01/04 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Python机器学习之决策树和随机森林
2021/07/15 Javascript
nginx中proxy_pass各种用法详解
2021/11/07 Servers
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js