element table合计（可点击，自定义值，修改样式，第一行展示）

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>