vue + element 自定义table表尾合计行

辞忧*

于 2022-02-07 16:28:50 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.youkuaiyun.com/Sugar_ask/article/details/122810553

版权

web前端专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中利用Element UI库的table组件实现自定义表尾总计功能。通过`show-summary`属性和`summary-method`回调函数，结合JavaScript自定义方法`getSummaries`，动态计算并展示特定列的总和。示例代码展示了如何处理数据转换和防止浮点数计算误差，确保总价的准确显示。

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

随手记：table表格引用官网自定义总价功能

html 主要用到 show-summary 表尾显示合并行和 summary-method 自定义计数方法。

<el-table
  :data="tableData"
  border
  style="width: 100%"
  show-summary
  :summary-method="getSummaries"
>
....
</el-table>

js 进行自定义方法的定义

methods: {
	getSummaries(param) {
	  // 定义参数接收回调数据
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        let values = [];
        // 使用判断遍历需要计数的列
        if (
          column.property === 'repaymentCapitalAmt' ||
          column.property === 'repaidCapitalAmt' ||
          column.property === 'surplusAmt'
        ) {
          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)) {
              // 接口返回与展示单位不一样时需手动计算，防止小数点后相加报错，也可直接 toFixed()
              return Number(prev * 100 + curr * 100) / 100;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = '';
        }
        // 放在最后防止foreach遍历后不显示自定义名字
        if (index === 0) {
          sums[index] = '小计';
        }
      });
      return sums;
   },
}