//表格列求和 

<el-table :summary-method="getSummaries" show-summary></el-table> 

getSummaries (param) {const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === ) {
sums[index] = '合计'
return
}
if (index === ) {
sums[index] = '/'
return
}
if (index === ) {
sums[index] = '/'
return
}
if (index === ) {
sums[index] = '/'
return
}
const values = data.map(item => Number(item[column.property]))
if (column.property === 'total' || column.property === 'used' || column.property === 'unused') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, )
// sums[index]
}
})
    this.sums = sums
   return sums
} 注意:data中定义sums:[]
<!-- 早餐统计 -->
<div class="statistics">
<el-col style="text-align:left;margin:20px 30px 0;font-weight:700;" :span="">早餐统计</el-col>
<el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="">{{sums[]}}<br><b>总份数</b></el-col>
<el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="">{{sums[]}}<br><b>已使用</b></el-col>
<el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="">{{sums[]}}<br><b>未使用</b></el-col>
</div>

vue表格之:summary-method="getSummaries"与show-summary(列求和)的更多相关文章

  1. 应用场景:vue表格撤销删除与保存按钮的显隐

    应用场景:vue表格撤销删除与保存按钮的显隐

  2. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  3. 用VBA计算WPS 表格ET EXCEL中的行数和列数的多重方法

    用VBA计算WPS 表格ET EXCEL中的行数和列数 每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count Ac ...

  4. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  5. vue 表格组件分享

    分享一款自己写的table组件  用起来还算简单好用   (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...

  6. vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

  7. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  8. Vue 表格里的下拉列表

    下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...

  9. vue 表格导出excel

    首先要install两个依赖, 1 npm install -S file-saver xlsx 2  npm install -D script-loader 在项目src目录下新建一个文件夹ven ...

随机推荐

  1. Go 关系运算符

    Go 关系运算符 package main import "fmt" func main() { var a int = 21 var b int = 10 if( a == b ...

  2. JZOJ5146:港湾

    Description 放假啦!小林和康娜来到了港口,看到有货船正在卸货.港口十分狭窄,只有两个卸货区可以使用.每个卸货区上面可以堆积任意多个箱子.每卸下来一个箱子,工作人员都会把这个箱子放在某个卸货 ...

  3. Python self的用法

    1)不加self是局部变量,只在这个方法里有效:加self则是实例变量,相当于别的函数定义的变量你实例化出来就可以使用 #coding:utf-8 class Person: def __init__ ...

  4. 25 面向对象设计实例——基于PCL点云库的通用工具开发

    0 引言 问题背景:pcl中提供了大量工具,用于对点云和三角面片文件进行处理和显示.在研究中,存在很多简易的需求,比如点云坐标转换,点云的打开显示以及同步显示,点云的最小包络求解,点云的格式转换等等. ...

  5. NX二次开发-UFUN获取工程图详细信息UF_DRAW_ask_drawing_info

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_part.h> UF_initialize ...

  6. NX二次开发-常用lib库文件

    在项目属性->配置属性->链接器->输入->附加依赖项: libufun.lib UFUNC API 函数库 libugopenint.lib UFUNC 对话框 API 函数 ...

  7. C++之STL(标准模板库)

    STL:standard Template Lib 一.vector <1> 特点 <2> 常用函数: <3> 遍历方法: 1.for循环 2.迭代器 <4& ...

  8. centos7.2搭建kubernetes1.5.2+dashboard

    一.    简介 近来容器对企业来说已经不是什么陌生的概念,Kubernetes作为Google开源的容器运行平台,受到了大家的热捧.搭建一套完整的kubernetes平台,也成为试用这套平台必须迈过 ...

  9. https://segmentfault.com 一个学习网站

    https://segmentfault.com一个学习网站

  10. linux就该这么学--资料整理--持续更新

    基础命令 服务管理 systemctl redhat7 systemctl start foo.service 启动服务 systemctl restart foo.service 重启服务 syst ...