Vue element 表格自定义列合计

545 阅读1分钟

---Vue theme: 兔先生 highlight: ---Element 表格自定义合计

      v-loading="loading"
      :data="roleList"
      @selection-change="handleSelectionChange"
      id="out-table"
      show-summary
      :summary-method="getSummaries"
    >
    // 
methods{
 //
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
        } else if (index === 9 || index === 10||index== 11) { // 对应列的合计
          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);
          } else {
            sums[index] = "N/A";
          }
        } else {
          sums[index] = "--";
        }
      });
      return sums;
    },
}