vue+elementUI 显示表格指定列合计数据

明确需求

下图来自elementUI官网

根据合计行数据的来源可以分为两种情况：

接口返回的数据只有表格中对应每个ID的数据，最后一行的合计是由前端来计算的
表格中的合计行数据是从接口中返回的，不是由前端计算的，只需要将拿到的数据显示即可

对于第一种情况，elementUI官网就有案例。
在开发中遇到了第二种情况，来记录一下处理方案：

1、明确返回数据结构

以上述表格为例：

res: {memberInfo: [{ID: 123456,'姓名'：'王小虎','数值1': 1,'数值2': 4,'数值3': 7},{ID: 123456,'姓名'：'王小虎','数值1': 2,'数值2': 5,'数值3': 8},{ID: 123456,'姓名'：'王小虎','数值1': 3,'数值2': 6,'数值3': 9}],sumInfo: {'sum1': 6,'sum1': 15,'sum1': 24,}
}

2、elementUI官网 - table显示合计行相关的属性

<el-table :data = "tableData"bordershow-summary:summary-method="getSummaries"
>
</el-table>

3、具体方案

在methods里面定义合计方法：

methods: {getSummaries () {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if(index === 0) {sums[index] = '合计';return;}switch(column.property) {  // column.property可以匹配它的每一列的命名， 然后赋值case "数值1":sums[index] = this.sum.sum1; //值取自后台break;case "数值2":sums[index] = this.sum.sum2; //值取自后台break;case "数值3":sums[index] = this.sum.sum3; //值取自后台break;default:break;}});return sums;}
}

sum中存放的是从后台拿到的合计数据：

data() {return {members: []   // === res.memberInfosum:{}   // === res.sumInfo}
}

至此，表格尾行显示合计就实现了。

vue+elementUI 显示表格指定列合计数据相关推荐

elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
C#实现给DevExpress中GridView表格指定列添加进度条显示效果——代码实现方式
一.问题描述在我们使用Winform配合DevExpress进行开发表格时,表格中的涉及到百分比数据的内容除了显示百分比的数字内容外,还希望搭配显示进度条效果(且低于百分之60的内容用红色表示不合格 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
word、wps中使用vba删除所有表格指定列
word.wps中使用vba删除所有表格指定列处理word表格搞得人头大,找时间百度一波写了个函数处理标记删除的问题,根据这一套逻辑还可以实现很多功能,供各位参考. 要点: 双循环遍历所有表表头 I ...
php前端计算合计,js统计表格指定列的合计
js统计表格指定列的合计龙行 PHP 2018-10-18 1894 0评论用户统计列表编号用户名存款下注中奖 {volist name="data" ...
PyQt5 技术篇-QTableWidget表格组件指定行的隐藏与显示控制实例演示，设置表格指定列的列宽方法
def change_table(self):'''作用:通过取值框的值改变表格行数'''cols = self.spinBox.value()if(cols == 1):# 行隐藏self.tabl ...
vue+elementui 打印表格不显示表格边框线
如果 Vue 项目使用了 Element UI 组件库中的 Table 组件打印表格时不显示表格边框线,可以通过在 CSS 中覆盖样式来解决. 可以在项目中新建一个 CSS 文件,如 print.cs ...

vue+elementUI 显示表格指定列合计数据

明确需求

1、明确返回数据结构

2、elementUI官网 - table显示合计行相关的属性

3、具体方案

vue+elementUI 显示表格指定列合计数据相关推荐

最新文章

热门文章