1、設置合計第一行展示

<style scoped>
  /* /deep/ 為深度操作符，可以穿透到子組件 */
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /* order默認值為0，只需將表體order置為1即可移到最后，這樣總計行就上移到表體上方 */
  /deep/ .el-table__body-wrapper {
    order: 1;
  }
</style>

在這里插入圖片描述

2、自定義合計顏色

<style scoped>
  /*合計字體顏色*/
  /deep/ .el-table__footer-wrapper tbody td {
    color: #409EFF;
    cursor: pointer;
  }
  /deep/ .el-table__footer-wrapper tbody td:first-child{
    color: red;
    cursor: auto;
  }
</style>

在這里插入圖片描述

3、自定義合計數量（展示后臺返回值）

      <el-table :data="tableData" border stripe show-summary :summary-method="getSummaries" class="table">
        <el-table-column align="center" prop="name" label="名稱" ></el-table-column>
        <el-table-column align="center" prop="num" label="數量" ></el-table-column>
      </el-table>

    methods: {
      // 總計
      getSummaries(param) {
        const { columns } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // index 第幾列從0開始
          if (index === 0) {
            sums[0] = '總計';
            return;
          }
          if (index === 1) {
            // this.customNum 自定義值一般為后臺返回合計值
            sums[1] = this.customNum;
            return;
          }
          sums[index] = '';
        });
        return sums;
      }
    },

在這里插入圖片描述

4、合計添加點擊事件

    mounted() {
      let this_ = this;
      let table = document.querySelector('.el-table__footer-wrapper>table');
      this.$nextTick(()=>{
        table.rows[0].cells[1].onclick = function(){
          this_.totalClick();
        };
      })
    },
    methods: {
      // 總計點擊事件
      totalClick() {
        alert('點擊了')
      },
    },

在這里插入圖片描述

附：所有代碼

<template>
    <div align="center">
      <p>自定義合計</p>
      <el-table :data="tableData" border stripe show-summary :summary-method="getSummaries" class="table">
        <el-table-column align="center" prop="name" label="名稱" ></el-table-column>
        <el-table-column align="center" prop="num" label="數量" ></el-table-column>
      </el-table>
    </div>
</template>

<script>
  export default {
    name: "demo1",
    data() {
      return {
        tableData:[{
          num: 20,
          name: '蘋果'
        },{
          num: 30,
          name: '草莓'
        }],
        customNum: 120,
      };
    },
    mounted() {
      let this_ = this;
      let table = document.querySelector('.el-table__footer-wrapper>table');
      this.$nextTick(()=>{
        table.rows[0].cells[1].onclick = function(){
          this_.totalClick();
        };
      })
    },
    methods: {
      // 總計點擊事件
      totalClick() {
        alert('點擊了')
      },
      // 總計
      getSummaries(param) {
        const { columns } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // index 第幾列從0開始
          if (index === 0) {
            sums[0] = '總計';
            return;
          }
          if (index === 1) {
            // this.customNum 自定義值一般為后臺返回合計值
            sums[1] = this.customNum;
            return;
          }
          sums[index] = '';
        });
        return sums;
      }
    },
  }
</script>

<style scoped>
  p {
    font-size: 30px;
    margin-top: 20px;
  }
  .table {
    width: 80%;
    margin-top: 30px;
  }
  /* /deep/ 為深度操作符，可以穿透到子組件 */
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /* order默認值為0，只需將表體order置為1即可移到最后，這樣總計行就上移到表體上方 */
  /deep/ .el-table__body-wrapper {
    order: 1;
  }
  /*總計字體顏色*/
  /deep/ .el-table__footer-wrapper tbody td {
    color: #409EFF;
    cursor: pointer;
  }
  /deep/ .el-table__footer-wrapper tbody td:first-child{
    color: red;
    cursor: auto;
  }
</style>