合计代码同官网代码不变
<template>
<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"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
</template>
<script>
export default {
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
}]
};
},
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;
}
}
};
</script>
样式调整
<style scoped lang="scss">
/* 存在固定列时,合计行位置修改 */
.el-table :deep(.el-table__fixed) {
display: flex;
flex-direction: column;
}
.el-table :deep(.el-table__fixed-footer-wrapper),
.el-table :deep(.el-table__fixed-body-wrapper),
.el-table :deep(.el-table__fixed-header-wrapper) {
position: initial;
}
// 固定列放到第一行
.el-table :deep(.el-table__fixed-body-wrapper) {
order: 1;
}
.el-table :deep(.el-table__fixed-footer-wrapper tbody td.el-table__cell) {
border-top: none;
/* background: black; */
color: #606266;
/* font-weight: bolder; */
}
/* 存在固定列时,合计行位置修改开始 */
/* 默认有1px去掉样式影响 */
.el-table :deep(.el-table__fixed::before) {
height: 0;
}
/* 合计行整体样式修改开始 */
.el-table :deep(.el-table__footer-wrapper tbody td) {
/* background: black; */
color: #606266;
/* font-weight: bolder; */
}
/* 合计行整体样式修改结束*/
/* 合计行位置修改开始 */
.el-table {
display: flex;
flex-direction: column;
}
.el-table :deep(.el-table__body-wrapper) {
order: 1;
}
/* 合计行位置修改结束*/
</style>