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 ...
随机推荐
- 在IDEA安装SonarLint插件的步骤和使用方法
1.安装SonarLint插件方式 2.使用方式 3.效果
- 牛客多校第八场 B Beauty Values 水题
题意: 给定一个序列,问你子区间中不同数字数量,在所有子区间中之和为多少. 题解: 统计每个数字在多少个区间中出现即可.对于每个数字,直接枚举左右端点. 注意去重,因此要记录每个数字上一次出现在哪里, ...
- 使用Windbg调试内核
Windbg是微软开发的免费源码级调试工具.Windbg可以用于Kernel模式调试和用户模式调试,还可以调试Dump文件. 1.从http://www.microsoft.com/whdc/devt ...
- jsp-解决自写Servlet老是报错404
写好servlet进行测试老是报404解决方案. 1.确保web.xml配置好 2.Bulid Path项目,在Libraries界面Add External JARs,在tomcat的lib目录下面 ...
- 牛客练习赛43D Tachibana Kanade Loves Sequence
题目链接:https://ac.nowcoder.com/acm/contest/548/D 题目大意 略 分析 贪心,首先小于等于 1 的数肯定不会被选到,因为选择一个数的代价是 1,必须选择大于1 ...
- 剑指offer——30包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 题解: 借助辅助栈,新的数据<=f辅助栈顶时,就压入辅助栈,这样,就能保证辅 ...
- seo具备的条件
对于SEO这行业,许多想学习这一行,但是并非每一个人都有这样才能.因为SEO份这行靠是真材实料并非虚拟人才.现在找到高工资的SEO人才需要 有三年以上经验,熟悉PHP.html.asp.java等等这 ...
- 大道浮屠诀---mysql5.7.28 for linux安装
环境: redhat6.5 MySQL Community Server 5.7.28 https://dev.mysql.com/downloads/mysql/5.7.html 安装RMP包的具体 ...
- 6-MySQL高级-索引
索引 1. 思考 在图书馆中是如何找到一本书的? 一般的应用系统对比数据库的读写比例在10:1左右(即有10次查询操作时有1次写的操作), 而且插入操作和更新操作很少出现性能问题, 遇到最多.最容易出 ...
- jmeter在windows环境下系统参数设置
在windows环境下搭建jmeter的压测实验环境,需要对操作系统默认的一些个参数进行设置,以提高并发能力.特别是作为压力机的时候. Socket 编程时,单机最多可以建立多少个 TCP 连接,受到 ...