vue表格（table）计算总计

<el-tablev-loading="loading":summary-method="getSummaries"show-summary:data="abcList"bordertooltip-effect="darkTable">

首先需要在table标签中添加

:summary-method="getSummaries"  // 调用方法
show-summary  //标签属性

methods: {getSummaries(param) {const { columns, data } = paramconsole.log(columns, data, 'columns,data')const sums = []columns.forEach((column, index) => {// 设置第一列的值为总计if (index === 0) {sums[index] = '总计'return}sums[3] = this.form.resultsums[3] += '元'})return sums}
}

因为Element上计算总计的方法是计算当前页上金额的总和，稍加修改~

sums[index] = '总计'
// 把下标为0的列赋值为总计
sums[3] = this.form.result
// this.form.result为init初始化时从接口中拿到的总计，赋值到下标为3的列上
sums[3] += '元'
// 得到的总计后加上单位元

vue表格（table）计算总计相关推荐

vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
Vue表格Table精美模板分享
文章目录
vue表格el-table取到某一列求和的值
elementUI官网给的求和方法只能在表尾显示,但这并不适用于现实开发. 网上给的解决方法大多没有用,希望这篇文章能帮到你. 实际开发例子: 需求:在表前位置显示电解液量总和解释: sumAmou ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
vue之table表格的合并
目录 vue之table表格的动态合并 vue之table表格的动态合并后台给数据处理断层 vue之table表格的动态合并后台给数据前端处理断层根据后台数据合并前三列数据 vue之tabl ...
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...
vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...

vue表格（table）计算总计

vue表格（table）计算总计相关推荐

最新文章

热门文章