若表格展示的是各类数字,可以在表尾显示各列的合计。
1、show-summary设置为true就会在表格尾部展示合计行。默认情况下,对于合计行,第一列不进行数据求合操作,而是
显示「合计」二字(可通过sum-text配置),其余列会将本列所有数值进行求合操作,并显示出来。
2、你也可以定义自己的合计逻辑。使用summary-method并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计
行的各列中summary-method 自定义的合计计算方法 Function({ columns, data })
<el-table
:data="tableData"
border
show-summary
style="width: 100%">
<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"
sortable>
</el-table-column>
<el-table-column
prop="amount2"
label="数值2"
sortable>
</el-table-column>
<el-table-column
prop="amount3"
label="数值3"
sortable>
</el-table-column>
</el-table>
<el-table
:data="tableData"
border
show-summary
:summary-method="getSummaries"
height="200"
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>
<script>
new Vue({
el: '#app',
data() {
return {
tableData:[
{
id:'12987122',
name: '王大虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王二虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王三虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王四虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王五虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}
]
}
},
/*
* columns:数组格式(与列数相等),包含列信息,label,property存储列名信息
* data:数组格式(与行数相等),包含行数据信息(列名:值 的形式)
* */
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
//循环处理所有列数据
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
//将每列的所有数据数字化处理成一个数组
const values = data.map(item => Number(item[column.property]));
//当前列的所有数据全是数字类型时
if (!values.every(value => isNaN(value))) {
//将当前列数据数组中的所有值,从左到右依次累加处理
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}
})