el-table中自定义合计样式_el-table最后一行合计行设置样式

1、要实现的效果如下：

2、实现代码如下：

<el-table show-summary :summary-method="summarySum"></el-table>
 
/js方法部分 
summarySum({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计"; //可更改合计行的名称
          return;
        }
        const values = data.map((item) => {
          return 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转换为数值
            let sum = Number(Number(prev) + Number(curr)); 
            if (!isNaN(value)) {
              return sum;
            } else {
              return prev;
            }
          }, 0);
          if(index === 7){
            sums[index] += "%"; //给合计项添加单位%
          }
        } else {
          sums[index] = "";
        }
      });
      return sums; //返回sums数组,sums数组中各项就会显示在合计行的各列中
    },