element-ui 表格合计行自定义

记录一下开发中遇上的表格合计行自定义的需求和解决方法。

问题：

需要做一个当前页面合计和全部数据的总计。

解决：

1、绑定一个方法（getSummaries）

2、最终需要的是该方法的返回值进行处理

   // 表格总计getSummaries(param) {const { columns, data } = param;const sums = [];var totalNum = [0,0,0,0,0];for (let i = 0; i < data.length; i++) {if(data[i].mealBlext3 == 1){totalNum[0]++;}if(data[i].lunch == 1){totalNum[1]++;}if(data[i].lunchNoodles == 1){totalNum[2]++;}if(data[i].dinner == 1){totalNum[3]++;}if(data[i].boxLunch == 1){totalNum[4]++;}}//实现表格的两行总计for (let i = 0; i < columns.length; i++) {if (i === 0){// sums[0] = "总计";sums[0] = <div><div>当前页总计</div><br /><div>总计</div></div>;}if (columns[i].property == 'mealBlext3'){sums[i] = <div><div>{totalNum[0]}</div><br /><div>{this.totalArr[0]}</div></div>;}if (columns[i].property =='boxLunch') {// sums[i] = 99;sums[i] = <div><div>{totalNum[4]}</div><br /><div>{this.totalArr[4]}</div></div>;}if (columns[i].property =='lunch') {// sums[i] = 88;sums[i] = <div><div>{totalNum[1]}</div><br /><div>{this.totalArr[1]}</div></div>;}if (columns[i].property == 'lunchNoodles') {sums[i] = <div><div>{totalNum[2]}</div><br /><div>{this.totalArr[2]}</div></div>;}if (columns[i].property =='dinner') {sums[i] = <div><div>{totalNum[3]}</div><br /><div>{this.totalArr[3]}</div></div>;}}return sums;},

element-ui 表格合计行自定义相关推荐

element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
layui数据表格合计行
在日常的学习或开发中,关于后台管理这一块的都会使用到layui.table数据表格,只要用到layui.table数据表格一般就会用到数据表格合计行. 在layui官方文档数据表格的这一栏中,有&qu ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶......
2019独角兽企业重金招聘Python工程师标准>>> FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的 ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
vue element计算表格合计问题
vue element计算表格合计问题问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计. 例如: <el-tableborderv-lo ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...

element-ui 表格合计行自定义

element-ui 表格合计行自定义相关推荐

最新文章

热门文章