//表格列求和 

<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. Nginx的静态代理

    Nginx的静态代理 Nginx的web请求的处理机制 Nginx结合多进程和异步机制对外提供服务,异步机制使用的是异步非阻塞机制,即AIO,Nginx的master进程会生成多个worker进程,m ...

  2. 零距离接触阿里云时序时空数据库TSDB

    概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增.阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空数 ...

  3. Delphi GDI对象之脱屏位图(Offscreen Bitmaps)

    脱屏位图(Offscreen Bitmaps) 脱屏位图,也叫内存位图,普遍用于Windows程序设计中.它在内存中制作图像,然后利用Draw方法在屏幕上显示出来.当用户想更快的在屏幕上绘制图像时,脱 ...

  4. Python 查看QQ状态

    import requests """ 该程序依赖于QQ的端口程序 返回数据:String,Y = 在线:N = 离线:E = QQ号码错误:A = 商业用户验证失败:V ...

  5. error C2443: operand size conflict

    #include <stdio.h> void main() { int a=98; __asm {     mov al,a     and al,11011111B     mov a ...

  6. postgresql-创建主键自增的表

    之前一直用的mysql,这个也基本上是主流,主键自增是很多建表规范中的硬性要求,不过这两种数据库主键自增的区别还是很大的 通常navicat中对mysql 主键自增直接客户端指定即可,不过对PG貌似不 ...

  7. 使用Pyppeteer进行gmail模拟登录

    import asyncio import time from pyppeteer import launch async def gmailLogin(username, password, url ...

  8. Spring Boot 整合 Shiro+Thymeleaf

    1.导包 <!-- springboot 与 shiro 的集成--> <dependency> <groupId>org.apache.shiro</gro ...

  9. 【LGP5127】子异和

    题目 子异和这个名字,真是思博 显然一个集合的子集异或和为,\(2^{|S|-1}\times A\),\(A\)为集合的或和 于是现在的问题变成了树链异或一个数,求树链或和 显然强行拆位是可以做的, ...

  10. USACO2008 Roads Around The Farm /// queue oj23321

    题目大意: N (1 ≤ N ≤ 1,000,000,000)牛群在遇到岔路时,若能分为恰好相差 K (1 ≤ K ≤ 1000)的两路,则持续分裂(假设会一直遇到岔路),否则停止开始吃草. Inpu ...