1、设置合计第一行展示
<style scoped>
/deep/ .el-table {
display: flex;
flex-direction: column;
}
/deep/ .el-table__body-wrapper {
order: 1;
}
</style>
![在这里插入图片描述](https://img-blog.csdnimg.cn/5e2603061d3a458b826bd42ab7d0a84c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARGV2ZWxvcG1lbnRX,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
2、自定义合计颜色
<style scoped>
/deep/ .el-table__footer-wrapper tbody td {
color: #409EFF;
cursor: pointer;
}
/deep/ .el-table__footer-wrapper tbody td:first-child{
color: red;
cursor: auto;
}
</style>
![在这里插入图片描述](https://img-blog.csdnimg.cn/f75462fdcacf4645a3cc214c284eeaf4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARGV2ZWxvcG1lbnRX,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
3、自定义合计数量(展示后台返回值)
<el-table :data="tableData" border stripe show-summary :summary-method="getSummaries" class="table">
<el-table-column align="center" prop="name" label="名称" ></el-table-column>
<el-table-column align="center" prop="num" label="数量" ></el-table-column>
</el-table>
methods: {
getSummaries(param) {
const {
columns } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[0] = '总计';
return;
}
if (index === 1) {
sums[1] = this.customNum;
return;
}
sums[index] = '';
});
return sums;
}
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/d61faf02cd5b48ae9437841e8c758e8f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARGV2ZWxvcG1lbnRX,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
4、合计添加点击事件
mounted() {
let this_ = this;
let table = document.querySelector('.el-table__footer-wrapper>table');
this.$nextTick(()=>{
table.rows[0].cells[1].onclick = function(){
this_.totalClick();
};
})
},
methods: {
totalClick() {
alert('点击了')
},
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/995e8b056a084030ab7107bab955bcd0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARGV2ZWxvcG1lbnRX,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
附:所有代码
<template>
<div align="center">
<p>自定义合计</p>
<el-table :data="tableData" border stripe show-summary :summary-method="getSummaries" class="table">
<el-table-column align="center" prop="name" label="名称" ></el-table-column>
<el-table-column align="center" prop="num" label="数量" ></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "demo1",
data() {
return {
tableData:[{
num: 20,
name: '苹果'
},{
num: 30,
name: '草莓'
}],
customNum: 120,
};
},
mounted() {
let this_ = this;
let table = document.querySelector('.el-table__footer-wrapper>table');
this.$nextTick(()=>{
table.rows[0].cells[1].onclick = function(){
this_.totalClick();
};
})
},
methods: {
totalClick() {
alert('点击了')
},
getSummaries(param) {
const {
columns } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[0] = '总计';
return;
}
if (index === 1) {
sums[1] = this.customNum;
return;
}
sums[index] = '';
});
return sums;
}
},
}
</script>
<style scoped>
p {
font-size: 30px;
margin-top: 20px;
}
.table {
width: 80%;
margin-top: 30px;
}
/deep/ .el-table {
display: flex;
flex-direction: column;
}
/deep/ .el-table__body-wrapper {
order: 1;
}
/deep/ .el-table__footer-wrapper tbody td {
color: #409EFF;
cursor: pointer;
}
/deep/ .el-table__footer-wrapper tbody td:first-child{
color: red;
cursor: auto;
}
</style>