element table合计（可点击，自定义值，修改样式，第一行展示）_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>
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4

    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;
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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('点击了')
      },
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

附：所有代码

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92