elementUI el-table 合计 并且排序

合计

<template>
    <el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary
        style="width: 100%; margin-top: 20px">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="amount1" label="数值 1（元）">
        </el-table-column>
        <el-table-column prop="amount2" label="数值 2（元）">
        </el-table-column>
        <el-table-column prop="amount3" label="数值 3（元）">
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                tableData: [],
                totalItem: "",
            }
        },
        methods: {
            getSummaries({
                row,
                columns,
                rowIndex,
                columnIndex
            }) {
                if (this.totalItem == undefined || this.totalItem == "") {// this.totalItem 需要展示到合计中的
                    return 0
                }
                const sums = []
                columns.forEach((column, index) => {
                    switch (index) {
                        case 0:// 直接放值
                            sums[index] = this.totalItem.city
                            break
                        case 1:// 通过VNode对象放内容 或者直接填写
                            sums[index] = (() => {
                                const h = this.$createElement
                                let a = this.totalItem
                                let el = h('span', {
                                    style: {
                                        color: '#FFBA00'
                                    }
                                }, this.totalItem.amount1)
                                return el
                            })();
                            break
                        case 2:// 拼接字符串
                            sums[index] = this.totalItem.amount2 + "%"
                            break
                        case 3:// 直接写字符串
                            sums[index] = ' - - '
                            break
                    }
                })
                return sums;
            },
        }
    }
</script>

将合计放到第一行,并排序

<template>
    <el-table v-loading="loading" :data="tableData" border @sort-change="sortChange">
        <el-table-column prop="month" label="月份" align="center" width="80px"></el-table-column>
        <el-table-column :sortable="'custom'" prop="test" label="测试" align="center">
            <template slot-scope="scope">
                <span style="color: #FFBA00;">
                    {{ scope.row.test + '%'}}
                </span>
                <span v-html="getArrow(scope.row.test)"></span> </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                tableData: [],
                totalItem: "",
            }
        },
        methods: {
            // 排序
            sortChange(column) {
              //获取字段名称和排序类型
              var fieldName = column.prop;
              var sortingType = column.order;
              // 表格数据
              this.tableData = this.tableData.filter(item => {
                return item.month != '合计'
              });
              if (sortingType === 'descending') {
                // 点击选择'降序'时，总计必定在第一行，所以不用管
                this.tableData = this.tableData.sort((a, b) => b[fieldName] - a[fieldName])
              } else {
                // 点击选择'升序'时，总计在最后一行，先删掉最后一行的总计，然后再unshift到第一行
                this.tableData = this.tableData.sort((a, b) => a[fieldName] - b[fieldName])
              }
              if (this.totalItem != undefined && this.totalItem != '') {
                this.tableData.unshift(this.totalItem)
              }
            },
            getArrow(num) {// 箭头函数
              if (num > 0) {
                return '<i class="el-icon-top" style="color:red;margin-left:6px" ></i>'
              } else if (num < 0) {
                return '<i v-if="scope.row.recordsRingRatio <= 100" class="el-icon-bottom" style="color:#1ed689;margin-left:6px" ></i>'
              } else if (num = 0) {
                return ''
              }
            },
            getNowTime() {// 获取时间
              var now = new Date();
              var year = now.getFullYear(); //得到年份
              var month = now.getMonth(); //得到月份
              var date = now.getDate(); //得到日期
              var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
              month = month + 1;
              month = month.toString().padStart(2, "0");
              date = date.toString().padStart(2, "0");
              var defaultDate = `${year}${month}`;
              return defaultDate;
            },
        }
    }
</script>