ElementUI表格自定义列自动合计

 ps：每列底部进行自动合计

用到的ElementUI组件

点击直达

 el-table添加自定义方法和显示合计列

直接上代码，解释在最后，感兴趣就看下

<el-table
      v-loading="loading"
      :data="mailList"
      show-summary
      :summary-method="getPaperNum"
      border
    >

getPaperNum(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 (column.property === 'paperNum') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = '--';
        }
      });

      return sums;
    },

ps:getPaperNum方法里要修改为你想显示的列

 齐活=