element table合计定制化

最新推荐文章于 2024-06-11 18:43:53 发布

zmyalh

最新推荐文章于 2024-06-11 18:43:53 发布

阅读量138

点赞数

文章标签： javascript 前端 elementui

本文链接：https://blog.csdn.net/zmyalh/article/details/129140019

版权

element table合计定制化

在这里插入图片描述
el-table 中加入 show-summary :summary-method=“getSummaries”

  <el-table :data='tableData' show-summary :summary-method="getSummaries" border style='width: 100%' max-height="271px" v-loading='tableLoading' show-overflow-tooltip></el-table >

方法

getSummaries(param) { //统计
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    let arrName = ['accountNo','name']  //表格中不统计的字段
    if ( !arrName.includes(column.property) ) {
      if (!values.every(value => isNaN(value))) {
        let data = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return  prev + curr ;
          } else {
            return  prev ;
          }
        }, 0);
        sums[index]  = parseFloat(data).toFixed(2);//数据保留两位
      } else {
        sums[index] = '--';
      }
    }else {
      sums[index] = '--';
    }
  });
  return sums;
},