需求是合计行不参与排序,并支持非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;
}
}