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 ...
随机推荐
- Android Activity XML配置
<activity android:name="xxxActivity" android:configChanges="keyboard|keyboardHidde ...
- bzoj1096题解
[解题思路] 预处理spi=∑pj(j∈[1,i]),si=si-1+(xi-xi-1)*spi-1表示把工厂1~i-1的产品都运到工厂i的花费.于是把工厂j+1~i的产品都运到工厂i的花费为si-s ...
- NX二次开发-UFUN创建表达式UF_MODL_create_exp_tag有TAG
NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建一个新的表达式,无TAG UF_MOD ...
- Dll注入技术之远程线程注入
DLL注入技术之远线程注入 DLL注入技术指的是将一个DLL文件强行加载到EXE文件中,并成为EXE文件中的一部分,这样做的目的在于方便我们通过这个DLL读写EXE文件内存数据,(例如 HOOK EX ...
- hexo next主题深度优化(七),cdn加速。
文章目录 注: 正题: 免费cdn 收费cdn 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io ...
- HDU1556-Color the ball-前缀和/线段树/树状数组
N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电动车从气球a开始到气球b依次给每个气球涂一次颜色.但 ...
- JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
- java-day03
判断语句if格式 if(关系表达式){ } if...else格式: if(关系表达式){ }else{ } if...else if格式: if(关系表达式){ }else if(关系表达式){ } ...
- 常见PID里面的像素大小
因为tensorflow/models里faster R-cnn目前识别的好像是按照像素比上图片大小来识别的,所以在这里统计一下各个元件的像素大小的范围 DCS:70~200
- Codeforces Round #567 (Div. 2)自闭记
嘿嘿嘿,第一篇文章,感觉代码可以缩起来简直不要太爽 打个div2发挥都这么差... 平均一题fail一次,还调不出错,自闭了 又一次跳A开B,又一次B傻逼错误调不出来 罚时上天,E还傻逼了..本来这场 ...