Bootstrap

开发需求总结18-vue el-table合计功能, 前几列使用合计求和,最后一列的百分比数据,计算出平均百分比

需求:

在element UI的el-table组件中,可以通过show-summary属性和summary-method属性来实现合计功能。如果需要在合计行中显示特定列的百分比数据,可以在summary-method中自定义合计逻辑。

代码实现:

<template>
  <el-table
    :data="tableData"
    show-summary
    :summary-method="getSummary"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="score"
      label="分数">
    </el-table-column>
    <el-table-column
      prop="percentage"
      label="百分比">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '张三', score: 10, percentage: '50%' },
        { date: '2016-05-04', name: '李四', score: 20, percentage: '60%' },
        // ...更多数据
      ]
    };
  },
  methods: {
    getSummary(param) {
      const { columns, data } = param;
      const sums = [];
 
      columns.forEach((column, index) => {
        if (index === columns.length - 1) {
          // 最后一列是百分比列,计算所有百分比的平均值
          const percentages = data.map(item => parseFloat(item.percentage.replace('%', '')) / 100);
          const average = percentages.reduce((total, num) => total + num, 0) / percentages.length;
          sums[index] = `${(average * 100).toFixed(2)}%`; // 保留两位小数
        } else {
          // 其他列使用求和方式
          const 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)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // 求和保留两位小数
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A';
          }
        }
      });
 
      return sums;
    }
  }
};
</script>

;