实现elemen-ui的最后一行合计功能

h_jQuery

已于 2022-10-17 15:29:48 修改

阅读量896

点赞数

分类专栏： javascript Vue es6 文章标签： ui javascript vue.js

于 2022-10-17 15:24:50 首次发布

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/127363389

版权

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

Vue

87 篇文章

订阅专栏

es6

73 篇文章

订阅专栏

本文介绍了如何在el-table和PlTable组件中实现表格数据的合计功能，包括全列求和与部分列求和。针对PlTable，还特别讨论了只对已勾选行进行合计的方法。同时，提到了PlTable在大数据量加载时的优化策略，如使用use-virtual属性和设置行高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table标签

与官网的例子操作一样即可
1.无特殊需求的，全部列都求和的，如下效果：
在这里插入图片描述

//在el-table添加以下这个属性即可
show-summary

2.只合计其中几列，如下效果：

//在el-table添加以下两个属性，以及对应回调
:summary-method="getSummaries" show-summary

//处理方法
getSummaries(param) {
      const { columns, data } = param;
      // 过滤需要合计的prop
      const property = ['amountInYear','remainingAmount'];
      const sums = [];
      columns.forEach((column, index) => {
         if (index === 0) {
          sums[index] = '合计';
          return;
        }
        //data为表格中的所有数据
        const values = data.map(item => Number(item[column.property]));
        //这里判断过滤
        if (!values.every(value => isNaN(value)) && property.includes(column.property)) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });
      //返回一个数组，数组的每一个元素对应着最后一行每一列的值
      return sums;
    }

在这里插入图片描述

PlTable标签

PlTable用于解决表格数据量大，导致加载卡顿的问题，使用方法与el-table几乎一致。
PlTable标签的合计功能与el-table标签的实现方法差不多，只是处理方法的返回值需要特殊处理。
PlTable标签的使用

//安装插件
npm i pl-table
//在页面引入
import { PlTable, PlTableColumn, PlxTableGrid, PlxTableColumn } from 'pl-table';
//注册组件
components:{PlTableColumn,PlTable}
//必须使用use-virtual属性，并且必须定义行高 :row-height="20"
<PlTable ref="table" stripe v-loading="loading" :datas="tableData" highlight-current-row :row-height="20" use-virtual style="width: 100%">
    <PlTableColumn prop="id" width="90" label="编号">
    </PlTableColumn>
</PlTable>

1.无特殊需求的，全部列都求和的，与el-table实现方式一样
2.只合计其中几列，并且只合计已勾选的行，如下效果：

//添加属性
:summary-method="getSummaries" show-summary

getSummaries(param) {
        const { columns, data } = param;
      // 过滤只合计的prop
        const property = ['amountInYear','remainingAmount','amountByCumulative','amountInMonth'];
        const sums = [];
        columns.forEach((column, index) => {
           if (index === 0) {
            sums[index] = '合计';
            return;
          }
          //存在已勾选的，才处理
          if(this.multipleSelection.length>0){
          //this.multipleSelection是已勾选的数组数据
            const values = this.multipleSelection.map(item => Number(item[column.property]));
            //判断
            if (!values.every(value => isNaN(value)) && property.includes(column.property)) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = '';
            }
          } else {
          //没有勾选的，就全部为空
            sums[index] = '';
          }
        });
        //只返回只有一个元素的数组，如果返回多个元素，就会产生多行
        const res = [sums]
        return res;
      }