element table只计算最后一列数据总和

最新推荐文章于 2024-01-31 16:53:48 发布

卖萌的小猪

最新推荐文章于 2024-01-31 16:53:48 发布

阅读量2.2k

点赞数 2

分类专栏： element-table类 vue

本文链接：https://blog.csdn.net/huihuiliu_/article/details/111056910

版权

本文介绍如何在Element UI的表格组件中仅计算最后一列的总和。当后端返回包含合计字段的数据时，只需在前端进行渲染。提供了一种通用的JS方法，可以直接使用，通过修改合计字段名来适配项目需求。

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

需求：element table只计算表格中最后一列的总和

官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。

1、HTML

<el-table 
        border
        show-summary 
        :summary-method="getSummaries"
        :formatter="formatter"  
        :default-sort = "{prop: 'projectName', order: 'descending'}" 
        :data="performanceList"
>
        <el-table-column sortable type="index"  label="序号" align="center" width="50" />
        <el-table-column  prop="projectName" label="项目名称" align="center" />
        <el-table-column sortable prop="originalPrice"  label="项目金额" align="center" />
        <el-table-column sortable prop="deductRatio" label=