普通用法

点击查看代码

<template>
  <div>
    <ygp-crud :data="data" :option="option"></ygp-crud>
  </div>
</template>

import BigNumber from "bignumber.js";

export default {
  data() {
    return {
      data: [
        {
          sum: 5,
          avg: 10,
          count: 2,
        },
        {
          sum: 15,
          avg: 20,
          count: 1,
        },
      ],
      option: {
        index: true,
        showSummary: true,
        summaryMethod: (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]));
            if (!values.every((value) => isNaN(value))) {
              const val = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return new BigNumber(prev).plus(curr).toNumber();
                } else {
                  return prev;
                }
              }, 0);
              if (column.property === "avg") {
                // 平均值
                sums[index] = val / data.length;
              } else {
                sums[index] = val;
              }
            }
          });
          return sums;
        },
        columns: [
          {
            label: "相加",
            prop: "sum",
          },
          {
            label: "平均值",
            prop: "avg",
          },
          {
            label: "统计",
            prop: "count",
          },
        ],
      },
    };
  },
};