目录
一.自定义合计行
二.合计行不展示，只有缩放/变大窗口或者F12弹出后台时才展示
三.合计行出现了表格滚动条下方
四.合计行整体样式的修改
五.合计行单元格样式修改
1.css
2.jsx方式
六.合计行单元格合并
一.自定义合计行
通过 show-summary 属性开启合计行功能，通过 :summary-method 属性自定义合计行方法。
<el-table :summary-method="getSummaries" show-summary ref="table">
</el-table> getSummaries(param) {
// columns 是一个数组,每一项就是每一列表头的内容
// data 是表格数据,每一项就是每一行 row 的数据
const { columns, data } = param;
// sums 是合计行的数据,是一个普通数组,数组每一项内容就是合计行按照顺序展示的内容
const sums = [];
columns.forEach((column, index) => {
// 这里是设置合计行第一列内容位 总计,也可以根据 index 判断, if (index === 0)
if (column.property === "trade_id") {
sums[index] = "合计";
} else if (
// 这里是自己需要合计的表头,也可以根据 index 判断,但是为了防止以后顺序打乱,就用 prop 去判断
column.property === "trade_power" ||
column.property === "trade_fee"
) {
// values 是该表头下所有数据组成的数组
const values = data.map((item) => Number(item[column.property]));
// 这是把数组的所有值都相加再一起,Utils方法是自己定义引入的避免精度缺失的方法,博客别的内容有写
sums[index] = values.reduce((prev, cur) => {
return Utils.argAdd(Number(prev), Number(cur));
}, 0);
} else {
// 这里不需要合计的表头 设置展示内容为 ---
sums[index] = "---";
}
});
return sums;
},二.合计行不展示，只有缩放/变大窗口或者F12弹出后台时才展示
不展示的原因：是因为表格刚开始是没有数据的，所以不展示合计行，等获取到数据的时候，表格不会重新渲染dom，所以该合计行还是不展示，缩放窗口或者弹出后台时会导致页面重新渲染，此时合计行才会渲染出来。
解决方法：在获取数据以后调用 el-table 的 doLayout() 方法去重新渲染表格 dom。
queryTableDataApi(params).then((res) => {
this.allTableData = res;
this.$nextTick(() => {
this.$refs["table"].doLayout();
});
});或者
updated() {
this.$nextTick(() => {
this.$refs["table"].doLayout();
});
},三.合计行出现了表格滚动条下方
原本合计行在表格下部，我们可以将合计行放在表格上部，也就是第一行。
::v-deep .el-table {
display: flex;
flex-direction: column;
}
/* order默认值为0，只需将表格主体order设为1即可移到最后，合计就上移到最上方了 */
::v-deep .el-table__body-wrapper {
order: 1;
}
// 下面的代码是设置 fixed 后，要根据实际情况所作的修改
::v-deep.el-table__fixed-body-wrapper {
top: 96px !important;
}
::v-deep .el-table__fixed-footer-wrapper {
z-index: 0;
}四.合计行整体样式的修改
::v-deep .el-table .el-table__footer-wrapper tbody td {
background: black;
color: white;
font-weight: bolder;
}五.合计行单元格样式修改
1.css
比较死板，因为要根据 nth-child(n) 去固定在某一列进行生效，如果顺序改变就会出现错误。
::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(3) {
color: lightgreen;
font-weight: bolder;
}
::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(4) {
color: red;
font-weight: bolder;
}2.jsx方式
合计行自定义方法中返回 jsx。
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (column.property === "trade_id") {
sums[index] = "合计";
} else if (
column.property === "trade_power" ||
column.property === "trade_fee"
) {
const values = data.map((item) => Number(item[column.property]));
let value = values.reduce((prev, cur) => {
return Utils.argAdd(Number(prev), Number(cur));
}, 0);
// 在这里设置类名
sums[index] = <span class={"green"}>{value}</span>;
} else {
sums[index] = "---";
}
});
return sums;
},.green {
color: lightgreen;
font-weight: bolder;
}六.合计行单元格合并
watch: {
showTableData: {
immediate: true,
handler() {
setTimeout(() => {
const tds = document.querySelectorAll(
".el-table__footer-wrapper tr>td"
);
tds[0].colSpan = 2;
tds[0].style.textAlign = "center";
tds[1].style.display = "none";
}, 0);
},
},
},
