【组件优化】iview表格在show-summary模式下展示合计行，并支持点击

需求是合计行不参与排序，并支持非0点击和样式，如下图，iview本身并不支持此类操作

1. 把iviewTable源码复制到本地文件并引入使用，记得引入组件内的js文件

2.在使用的文件中，通过iview自定义【合计行】的方法summary-method，给每项配置类名和方法

<table-v2
        slot="content"
        show-summary
        :summary-method="handleSum" // iview自定义【合计行】
        :columns="columnsStatictics"
        :data="dataCategory.statiscalData"
    />

handleSum ({ columns, data }) {
     const sums = {};
     let that = this; // 记得改变this；
     columns.forEach((column, index) => {
         const key = column.key;
         if (index === 0) {
             sums[key] = {
                 key,
                 value: '合计'
             };
             return;
         }
         const values = data.map(item => Number(item[key].count));
         if (!values.every(value => isNaN(value))) {
             const v = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
                     return prev + curr;
                 } else {
                     return prev;
                 }
             }, 0);
             // 给非0的每项添加类名和方法，除此之外，其他的配置都是照着iview写
             if (v > 0) {
                 sums[key] = {
                     key,
                     value: v,
                     cls: 'total-cell-td-container',
                     fn: function (data) {
	// 这个方法里面写点击要做的事情
                         if (!data.value) return;
                         that.detailKey = '挽回经济损失金额（万元）';
                         let item = {
                             measure_ids: that.totalStatiscalData[0][data.key].measure_ids || [],
                             data_item: data.key
                         }
                         this.drawerDept = '公司';
                         this.getStatisticalDetail(item);
                     }
                 };
             } else {
                 sums[key] = {
                     key,
                     value: v,
                     cls: ''
                 };
             }
         } else {
             sums[key] = {
                 key,
                 value: 0
             };
         }
     });
     return sums;
 },

3.在复制过来的Table组件中，增加类名和调用方法

// 这是summary.vue, 表格合计行的组件，我仅增加了类名和方法
<template>
    <div style="overflow:hidden;">
        <table
            class="ivu-table-summary"
            cellspacing="0"
            cellpadding="0"
            border="0"
            :style="styleObject"
        >
            <colgroup>
                <col v-for="(column, index) in columns" :width="setCellWidth(column)" />
            </colgroup>
            <tbody :class="[prefixCls + '-tbody']">
                <tr class="ivu-table-row">
                    <td v-for="(column, index) in columns" :class="alignCls(column)">
                        <div class="ivu-table-cell" :class="cellCls(column)">
                        	// 这是我做的类名和方法改动
                            <span
                                :class="data[column.key].cls"
                                @click="handleClick(data[column.key])"
                            >{{ data[column.key].value }}</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import Mixin from './mixin';

export default {
    name: 'TableSummary',
    mixins: [Mixin],
    props: {
        prefixCls: String,
        styleObject: Object,
        columns: Array,
        data: Object,    // rebuildData
        columnsWidth: Object,
        fixed: {
            type: [Boolean, String],
            default: false
        }
    },
    methods: {
        cellCls (column) {
            return [
                {
                    ['ivu-table-hidden']: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
                }
            ];
        },
        handleClick (item) {
        // 调用父组件的方法
            item.fn && item.fn(item);
        }
    }
};
</script>

4.通过设置的类名改变样式

// 在调用页面写即可
.ivu-table-with-summary {
    .total-cell-td-container {
        color: #dc2f03;
        cursor: pointer;
    }
}