项目需求:工资表实现合计行
开发前牢骚一下
合计行和列这么基础的东西 ant-table 居然没有(element 是有的),查了文档,ant 还是留了一手,支持slot footer。这就需要自己手动去实现了。
分析
我们要知道那些列是合计列, 那些列不需要。1. 合计列需要手动计算 总和。 2.而不需要合计的列需要做列合并。
3.再有合计列的实现实际上是利用slot 插入一个a-table (去除表头的)和 上边正统的a-table, 如果出现滚动条,这两个表格是需要一同联动的。
这就是实现合计行的三个要点,其余应该是写样式上的调整美化。
下面直接给出几段关键代码
1.合计表格 和正统表格的滚动 联动
if (this.isTotal) {
// 同步表与footer滚动
let dom = document.querySelector(".ant-table-body");
window.setTimeout(function() {
var lastScrollLeft = 0;
dom.addEventListener("scroll", function() {
if (lastScrollLeft != dom.scrollLeft) {
lastScrollLeft = dom.scrollLeft;
_this.$refs["total-table"].$el.querySelectorAll(".ant-table-body")[0].scrollLeft = lastScrollLeft;
}
});
}, 2000);
}
2.合计行的slot 写法
<template v-if="isTotal && totalData.length > 0 && tableBody.length > 0">
<template slot="footer">
<a-table
ref="total-table"
class="total-table"
:columns="columnKeys" // 和上边表格一样就行(如果需要合计列,需要加工)
:dataSource="totalData" // 自定义生成
:showHeader="false"
:pagination="false"
:size="cellsize ? cellsize : attrBute.cellsize"
:rowClassName="
() => {
return 'totalRow';
}
"
:scroll="{ x: scrollX, y: innerScrollY }"
/>
</template>
</template>
3.为了写成通用的 接收了动态传入的 totalColumnsKey 如下(我这里偷懒了 没有设置合并列)
totalColumnsKey:{
totalKeys:["合计列的key"],
titleKeys:["不需要合计的列的key"],
title: "合计"
}
// 设置合计行数据源
setTotalDataSource(val) {
if (this.isTotal) {
let totalData = {};
let items = JSON.parse(JSON.stringify(val[0]));
for (let k in items) {
if (k !== "children") {
totalData[k] = "";
}
}
totalData.key = "12333";
// 根据表头找到第一列或最后一列, 并且不是合并列
totalData[this.totalColumnsKey.titleKeys[0]] = this.totalColumnsKey.title;
this.totalColumnsKey.totalKeys.forEach(totalKey => {
totalData[totalKey] = 0;
});
this.getBodyTotalColumns(totalData, val);
this.totalData = [];
this.totalData.push(totalData);
}
},
// 只合计父节点, 子节点不参与合计
getBodyTotalColumns(totalData, arr) {
let _this = this;
arr.forEach(number => {
_this.totalColumnsKey.totalKeys.forEach(totalKey => {
totalData[totalKey] += Number(number[totalKey]);
});
});
},