vue表格之:summary-method="getSummaries"与show-summary(列求和)
//表格列求和 <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(列求和)的更多相关文章
- 应用场景:vue表格撤销删除与保存按钮的显隐
应用场景:vue表格撤销删除与保存按钮的显隐
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 用VBA计算WPS 表格ET EXCEL中的行数和列数的多重方法
用VBA计算WPS 表格ET EXCEL中的行数和列数 每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count Ac ...
- 利用jquery表格添加一行并在每行第一列大写字母显示实现方法
表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
- vue 表格组件分享
分享一款自己写的table组件 用起来还算简单好用 (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- Vue 表格里的下拉列表
下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...
- vue 表格导出excel
首先要install两个依赖, 1 npm install -S file-saver xlsx 2 npm install -D script-loader 在项目src目录下新建一个文件夹ven ...
随机推荐
- Nginx的静态代理
Nginx的静态代理 Nginx的web请求的处理机制 Nginx结合多进程和异步机制对外提供服务,异步机制使用的是异步非阻塞机制,即AIO,Nginx的master进程会生成多个worker进程,m ...
- 零距离接触阿里云时序时空数据库TSDB
概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增.阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空数 ...
- Delphi GDI对象之脱屏位图(Offscreen Bitmaps)
脱屏位图(Offscreen Bitmaps) 脱屏位图,也叫内存位图,普遍用于Windows程序设计中.它在内存中制作图像,然后利用Draw方法在屏幕上显示出来.当用户想更快的在屏幕上绘制图像时,脱 ...
- Python 查看QQ状态
import requests """ 该程序依赖于QQ的端口程序 返回数据:String,Y = 在线:N = 离线:E = QQ号码错误:A = 商业用户验证失败:V ...
- error C2443: operand size conflict
#include <stdio.h> void main() { int a=98; __asm { mov al,a and al,11011111B mov a ...
- postgresql-创建主键自增的表
之前一直用的mysql,这个也基本上是主流,主键自增是很多建表规范中的硬性要求,不过这两种数据库主键自增的区别还是很大的 通常navicat中对mysql 主键自增直接客户端指定即可,不过对PG貌似不 ...
- 使用Pyppeteer进行gmail模拟登录
import asyncio import time from pyppeteer import launch async def gmailLogin(username, password, url ...
- Spring Boot 整合 Shiro+Thymeleaf
1.导包 <!-- springboot 与 shiro 的集成--> <dependency> <groupId>org.apache.shiro</gro ...
- 【LGP5127】子异和
题目 子异和这个名字,真是思博 显然一个集合的子集异或和为,\(2^{|S|-1}\times A\),\(A\)为集合的或和 于是现在的问题变成了树链异或一个数,求树链或和 显然强行拆位是可以做的, ...
- USACO2008 Roads Around The Farm /// queue oj23321
题目大意: N (1 ≤ N ≤ 1,000,000,000)牛群在遇到岔路时,若能分为恰好相差 K (1 ≤ K ≤ 1000)的两路,则持续分裂(假设会一直遇到岔路),否则停止开始吃草. Inpu ...