欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue element-ui 表格table列求和(合计行)

程序员文章站 2022-06-08 09:06:29
...

vue element-ui 表格table列求和(合计行)

<el-table :data="tableData" border show-summary  :summary-method="getSummaries" style="width: 100%">
<el-table-column
     prop="total1"
     label="总数"
     align="center"
     width="120"></el-table-column>
 </el-table>

1、 :summary-method=“getSummaries” show-summary 必须加。
2、summary-method中传入getSummaries自定义方法。
3、el-table-column中必须有prop。

//列求和
getSummaries(param) {
   const { columns, data } = param;//这里可以看出,自定义函数会传入每一列,以及数据
   const sums = [];
   columns.forEach((column, index) => {
     if (index === 0) {
       sums[index] = '总计';
       return;
     }else if (index >= 3) { //index>=3后的列进行求和               
       //页面分别统计 处理
       const values = data.map(item => Number(item[column.property]));
       if (!values.every(value => isNaN(value))) {
           sums[index] = values.reduce((prev, curr) => {
             const value = Number(curr);
             if (!isNaN(value)) {
                return prev + curr ;                    
             } else {
                return prev;
             }               
           }, 0);
       //此处结合了方式一的判断处理,实现多种条件处理
       //此处的column.property获取的值对应<el-table-column>中prop对应的字段
         switch(column.property) {
            case "total1":
            case "total2":
            case "total3":                    
                 return sums[index] = sums[index]  ;
                 break;                 
          } 
                      
       } else {
          sums[index] = ''; //如果列的值有一项不是数字,就显示这个自定义内容
       }
     }else {
		sums[index] = '--'
	 }
    });
     return sums;//最后返回合计行的数据
},

效果图
vue element-ui 表格table列求和(合计行)
这里完成后,会出现总计行在滚动条下方的问题。解决方法可参考这里。 https://blog.csdn.net/qq_32103525/article/details/119758716?spm=1001.2014.3001.5501.

相关标签: vue