el-table中设置了show-summary会出现合计栏，因为表格列比较多，会导致滚动条在合计栏的上面，需要对css进行调整。
解决方法：
要将整个table滚动，不是只对表格内容区域滚动，所以将表头、表内容、表尾的滚动条设为visible。因此需要在el-table外面再套一个盒子，让整个table有滚动条。 需要另外写一个<style></style>标签，不要加scoped属性，否则不生效。
<div class="container">
<el-table :data="tableData" border :summary-method="getSummaries" show-summary>
<!-- ... -->
</el-table>
</div>
<style>
.container .el-table {
overflow: auto;
}
.container .el-table--scrollable-x .el-table__body-wrapper,
.container .el-table__header-wrapper,
.container .el-table__footer-wrapper {
overflow: visible;
}
.container .el-table::after {
position: relative !important;
}
</style>
实现效果如下，但是整个表格进行拖动的时候，会导致表格列el-table-column的fixed属性失效。
如果要实现滚动条在合计行下方，同时兼容fixed属性，经过多番查找，终于找到了一篇博客确实可以实现需求，整合了一下代码如下：
<template>
<div class="container">
<el-table
:data="tableData"
ref="elTable"
border
:summary-method="getSummaries"
show-summary
>
<el-table-column
label="班级/科目"
align="center"
prop="grade"
width="150"
/>
<el-table-column
v-for="(item, index) in headerList"
:key="index"
:label="item.label"
align="center"
width="120"
>
<template slot-scope="scope">
<span>{{ scope.row.options[index].num }}</span>
</template>
</el-table-column>
<el-table-column
label="班级人数汇总"
align="center"
prop="sum"
width="180"
/>
</el-table>
</div>
</template>
<script>
import { throttle } from "throttle-debounce";
export default {
data() {
return {
tableData: [],
headerList: [],
};
},
computed: {
bodyWrapper() {
return this.$refs.elTable.$refs.bodyWrapper;
},
footerWrapper() {
return this.$refs.elTable.$refs.footerWrapper;
},
fixedWrapper() {
return this.$refs.elTable.$refs.fixedWrapper;
},
elTableRefs() {
return this.$refs.elTable.$refs;
},
},
destroyed() {
// 退出时去除自定义scroll事件
this.unbindEvents();
},
mounted() {
this.getList();
this.$nextTick(() => {
// 样式调整,fixed布局下fixed列的高度会有偏差
let fixedWrapper = this.$refs.elTable.$refs.fixedWrapper
? this.$refs.elTable.$refs.fixedWrapper
: "";
let rightFixedWrapper = this.$refs.elTable.$refs.rightFixedWrapper
? this.$refs.elTable.$refs.rightFixedWrapper
: "";
fixedWrapper &&
(fixedWrapper.style.maxHeight = this.$refs.elTable.layout.viewportHeight
? this.$refs.elTable.layout.viewportHeight + "px"
: "");
rightFixedWrapper &&
(rightFixedWrapper.style.maxHeight = this.$refs.elTable.layout
.viewportHeight
? this.$refs.elTable.layout.viewportHeight + "px"
: "");
});
// 自定义scroll事件
this.bindEvents();
// 去除原本的scroll事件
this.$refs.elTable.unbindEvents();
},
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "科目人数汇总";
return;
}
const values = data.map((item) => {
const sameObj = item.options.find(
(val) => val.label === columns[index].label
);
return sameObj ? Number(sameObj.num) : 0;
});
if (
!values.every((value) => isNaN(value)) &&
column.property !== "sum"
) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = "";
}
});
return sums;
},
getList() {
this.tableData = [
{
id: 1,
grade: "高一（1）",
options: [
{ label: "语文", num: 200 },
{ label: "数学", num: 200 },
{ label: "英语", num: 200 },
{ label: "物理", num: 150 },
{ label: "历史", num: 80 },
{ label: "历史2", num: 80 },
{ label: "历史3", num: 80 },
{ label: "历史4", num: 80 },
{ label: "历史5", num: 80 },
{ label: "历史6", num: 80 },
{ label: "历史7", num: 80 },
{ label: "历史8", num: 80 },
],
},
{
id: 1,
grade: "高一（2）",
options: [
{ label: "语文", num: 150 },
{ label: "数学", num: 150 },
{ label: "英语", num: 150 },
{ label: "物理", num: 70 },
{ label: "历史", num: 50 },
{ label: "历史2", num: 80 },
{ label: "历史3", num: 80 },
{ label: "历史4", num: 80 },
{ label: "历史5", num: 80 },
{ label: "历史6", num: 80 },
{ label: "历史7", num: 80 },
{ label: "历史8", num: 80 },
],
},
];
this.headerList = this.tableData[0].options.map((item) => {
return { label: item.label };
});
this.tableData = this.tableData.map((item) => {
const sum = item.options.reduce((prev, curr) => {
return prev + curr.num;
}, 0);
return {
...item,
sum,
};
});
},
// TODO 使用 CSS transform
// throttle 节流函数,组件自带的
syncPostion: throttle(20, function () {
const { scrollLeft, scrollTop, offsetWidth, scrollWidth } =
this.footerWrapper;
const {
headerWrapper,
bodyWrapper,
footerWrapper,
fixedBodyWrapper,
rightFixedBodyWrapper,
} = this.elTableRefs;
console.log(footerWrapper, "footerWrapper");
if (bodyWrapper) bodyWrapper.scrollLeft = scrollLeft;
if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
this.scrollPosition = "right";
} else if (scrollLeft === 0) {
this.scrollPosition = "left";
} else {
this.scrollPosition = "middle";
}
}),
// 绑定scroll事件
bindEvents() {
this.footerWrapper.addEventListener("scroll", this.syncPostion, {
passive: true,
});
},
// 解绑scroll事件
unbindEvents() {
this.footerWrapper.removeEventListener("scroll", this.syncPostion, {
passive: true,
});
},
},
};
</script>
<style scoped>
::v-deep .el-table__fixed-footer-wrapper tbody td.el-table__cell{
border-top: none;
}
</style>
<style lang="less">
// 去除原本的进度条
.el-table__body-wrapper {
overflow-x: hidden !important;
}
// 添加新的的进度条
.el-table__footer-wrapper {
overflow-x: auto !important;
}
</style>
