elementUI table组件 合计方法

 合计方法过滤掉不需要显示的合计列

/**
 * 合计方法  
 * param  为elementUI table组件合计方法获取的参数param
 * arr  传入不需要显示合计的列表字段
 */
export function getSummaries (param, arr = []) {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    };
    let bor = true;
    if (arr.length > 0 && (arr.find(item => item == column.property) != undefined)) {
      bor = false
    };
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => isNaN(value)) && bor) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return Number(prev) + Number(curr);
        } else {
          return Number(prev);
        }
      }, 0);
    } else {
      sums[index] = '';
    }
  });
  return sums;
}

例子如下

html

js

var Main = {
  data() {
    return {
      tableData: [
        { id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10 },
        { id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12 }, 
        { id: '12987124', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9 }, 
        { id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17 }, 
        { id: '12987126', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }
      ]
     };
  },
  methods: {
    getSummarie(param) {
      return this.getSummaries(param,['amount1'])
    },
    getSummaries (param, arr = []) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        };
        let bor = true;
        //判断是否存在不需要合计的列
        if (arr.length > 0 && (arr.find(item => item == column.property) != undefined)) {
          bor = false
        };
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value)) && bor) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Number(prev) + Number(curr);
            } else {
              return Number(prev);
            }
          }, 0);
        } else {
          sums[index] = '';
        }
      });
      return sums;
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')