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

随手记：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;
   },
}

效果图