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;
},
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/66295.html