Element-ui el-table合计属性summary-method的使用，以及合计行样式自定义

根据自己的合计逻辑，使用element官方的合计属性summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体看以下代码

html代码

<el-table
  :data="tableData1"
  style="width: 100%"
  border
  show-summary
  :summary-method="getSummaries"
>
</el-table>

合计列方法

getSummaries(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]));  //property为表头的prop值
          // every() 方法用于检测values数组所有元素是否都符合指定条件（通过函数提供）
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr); //Number转换为数值
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toLocaleString();; //给合计项以使用千分位(逗号)分隔
          } else {
            sums[index] = '--';
          }
        });

        return sums; //返回sums数组,sums数组中各项就会显示在合计行的各列中
    }