el-table合计行前置在首行,自定义合计行方法

背景

el-table原生合计行是在标签内增加show-summary属性,在表尾实现设计合计,且只对表格当前页面显示的列数据进行合计。element-UI效果如下图所示。

现要求在首行显示合计行,并自定义合计逻辑实现如下效果。

图示表格中,成本、收入、利润可以由列累加得;而利润率不能简单的直接累加,否则会出现利润率越来越高的情况,不符合生活常识和实际情况,因此该列的合计逻辑依然是【利润率 = 利润/收入】

前端

show-summary显示合计,:summary-method声明使用自定义合计方法。

html 复制代码
<el-table v-loading="loading" :data="costList" border
                          :header-cell-style="{backgroundColor: '#DFEBF8'}"
                          show-summary
                          :summary-method = "getSummaryMethod"">
                          <el-table-column....../>
                          <el-table-column....../>
                          <el-table-column....../>
                          <el-table-column....../>
                          <el-table-column....../>

</el-table>                          
  1. 合计行位置放到首行
javascript 复制代码
methods:{    
    /** 合计行设置 */
    showSummariesPosition () {
      // 合计行显示在表头
      let table = document.querySelector('.el-table')
      let footer = document.querySelector('.el-table__footer-wrapper')
      let body = document.querySelector('.el-table__body-wrapper')
      table.removeChild(footer)
      table.insertBefore(footer, body)
    },
 }
  1. 定义合计逻辑方法
javascript 复制代码
  data() {
    return {
    costList:[],	//接收后端数据
    }
  },
  created() {
    this.getSummaryMethod();
  },
  methods: {
	/** 自定义合计逻辑 */
    getSummaryMethod(params) {
      const { columns, data } = params;
      const sums = [];  //累加和
      const totalValue = [];  //存储列表,封装合计行要显示的数据
      columns.forEach((column, index) => {		//参数(列,列下标)
        sums [index] =0;	//累加和,初始化为0
        var i;
        if (index === 0) {	//第一列显示"合计"字样
          totalValue[index] = "合计";
          return;
        }
        if (index === 1) {  //第二列----总成本
          for (i = 0; i < this.costList.length; i++){	//循环累加
            sums[index] = this.costList[i].totalCost+sums[index];	
          };
          totalValue[index] = (sums[index]/10000).toFixed(2) + '万元';//格式化,保留两位小数
          //把累加和写入合计行列表
          return ;
        }
       if (index === 2) {   //第三列----总产值
         for (i = 0; i < this.costList.length; i++) {
           sums[index] = this.costList[i].totalOutput+sums[index];
         }
         totalValue[index] = (sums[index]/10000).toFixed(2) + '万元';
          return ;
        }
        if (index === 3) {    //第四列----利润
          sums[3] = sums[2]-sums[1];
          totalValue[index] = (sums[3]/10000).toFixed(2) + '万元';
          return ;
        }
        if (index === 4) {    //第五列----利润率 = 利润/收入
          totalValue[index] = (sums[3]/sums[2]*100).toFixed(2) + '%';
          return ;
        }
      });
      return totalValue;	//返回合计行列表
    },
}
相关推荐
请叫我欧皇i19 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_22 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun27 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网