element table合计 计算属性计算特定列

element表格有一个合计属性可以直接计算列的值并在结尾显示
table里设置show-summary,并自定义一个计算方法getSumsummary-method
下面方法只需要修改calcProp数组内的值,吧需要计算的列的prop放到calcProp数组中

<el-table :data="tableData" show-summary  :summary-method="getSum"></el-table>
methods:{
// 表格合计
    getSum(param) {
      const { columns, data } = param;
      const sums = [];
      console.log(columns, data);
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
       //calcProp 为需要计算的列的prop值的集合
        const calcProp = ["energyConsumption", "maxPower", "averagePower"];
        if (calcProp.includes(column.property)) {
          const values = data.map(item => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });
      return sums;
    },
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容