1.将show-summary
设置为true
就会在表格尾部展示合计行。
<el-table
:data="tableData"
id="tableData"
show-summary
:summary-method="getSummaries"
>
2.借用样式将合计行置顶
.el-table {
display: flex;
flex-direction: column;
}
.el-table .el-table__body-wrapper {
order: 1;
}
3.使用vue.$el.querySelector()方法,table渲染时,调用封装好的合并方法。
setColSpan() {
var that = this;
setTimeout(function () {
if (that.$el.querySelector("#tableData")) {
var current = that.$el
.querySelector("#tableData")
.querySelector(".el-table__footer-wrapper")
.querySelector(".el-table__footer");
var cell = current.rows[0].cells;
cell[0].style.display = "none"; //隐藏一列用于多列合并
cell[1].colSpan = "2"; //合并两列
}
}, 10);
},
4.渲染合计,sumObj是通过后端接口得到的对应字段的合计(对象数据)。在并在此处调用合并“合计”文字的单元格
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
sums[index] = isNaN(this.sumObj[column.property]) ? '' :this.sumObj[column.property]
});
this.setColSpan();
return sums;
},