Vue 表格合计功能最后一行自定义合计数据

Tigers996

已于 2022-11-09 09:56:37 修改

阅读量3.5k

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端

于 2022-10-19 11:59:33 首次发布

本文链接：https://blog.csdn.net/d1332508051/article/details/127404897

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Element UI的表格组件中通过设置`:summary-method`和`show-summary`属性来开启合计功能，并提供了自定义合计方法`getSummaries`的示例，该方法用于计算'到款额'、'开票额'和'去年同期开票额'等列的总计，以展示在表格底部。

摘要由CSDN通过智能技术生成

一、效果

二、table设置

:summary-method=“getSummaries” (自定义的合计方法)
show-summary (开启合计功能)

 <el-table :data="tableData"
      size="small"
      id="tableData"
      border
      :summary-method="getSummaries"
      show-summary
  >

三、自定义方法

getSummaries(param) {
   const { columns, data } = param;
   const sums = [];
   columns.forEach((column, index) => {
      if (index === 0) {
          sums[index] = '合计';
           return;
      }
      // 可以用index设置 因为项目会动态改变列 所以我用了name
      if (column.label == "到款额" || column.label == "开票额" || column.label == "去年同期开票额") {
         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);
              sums[index] = (sums[index]) + '元';
           } else {
               sums[index] = '';
         }
      }
      
   });
   return sums;
}