element-ui表格合计封装

一、方法封装

/**
 * element-ui表格总计方法
 * param: 为element-ui table组件合计方法获取的参数param
 * cols: 分页合计值
 * count_sum : 传入后端返回得需要合计的列表字段
 */
export function getSummariesTable(param, count_sum = {}, cols = []) {
  const { columns, data } = param;
  const colsArr = cols.map(i => {
    if (i.hj === "hj" && i.prop) {
      return i.prop;
    }
    return "";
  });
  const sums = [];
  columns.forEach((column, index) => {
    // 判断后端传入的总计
    let is_count = Object.keys(count_sum).length > 0;
    if (index === 0) {
      sums[index] = is_count ? "总计" : "合计";
      return;
    }
    // 后端传入的总计
    if (is_count && count_sum[column.property] !== undefined) {
      sums[index] = count_sum[column.property];
    } else if (colsArr.indexOf(column.property) !== -1) {
      // 分页合计
      // column.property  当前列的绑定值
      const values = data.map(item => Number(item[column.property]));
      // 判断当前的值不为NaN
      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);
        if (colsArr.indexOf(column.property) !== -1) {
          cols.forEach(item => {
            if (item.prop === column.property) {
              sums[index] = sums[index].toFixed(item.precision);
            }
          });
        }
      } else {
        sums[index] = "N/A";
      }
    }
  });
  return sums;
}

二、全局引用

// 引入ELment-ui合计方法
import { getSummariesTable } from "@/utils/index";
Vue.prototype.$getSummariesTable = getSummariesTable;

三、方法使用

1、表格所有数据总计

// this.count_sum：后端返回得表格所有数据得合计，大家都知道，element表格合计都是当前页得合计，并不是所有数据得合计
// 数据返回实例：
// count_sum：{
// 	   balance: "87168.17"，
//     integrate:47846，
//     total_balance: "492908.01"
// }

// 使用
getSummaries(param) {
   return this.$getSummariesTable(param, this.count_sum);
}

2、表格当前页数据合计

1、传入数据
cols:[
	{
    name: "储值余额",
    prop: "balance",
    width: "160",
    align: "center",
    hj:"hj", // 合计字段
    precision:"2", // 保留位数
  },
  {
    name: "可用积分",
    prop: "integrate",
    width: "120",
    align: "center",
    hj:"hj", // 合计字段
    precision:"0", // 保留位数
  },
  {
    name: "累积充值金额",
    prop: "total_balance",
    width: "140",
    align: "center",
    hj:"hj", // 合计字段
    precision:"2", // 保留位数
  },
]

2、使用
getSummaries(param) {
   return this.$getSummariesTable(param, {}, this.cols);
}

封装之后，可以节省开发成本，代码量进行复用，希望对大家有帮助！！！