element-ui table表格增加合计行和表格列固定之后滚动条无法滚动

71 阅读 0 评论 47 点赞

我是靠谱客的博主动听马里奥，最近开发中收集的这篇文章主要介绍element-ui table表格增加合计行和表格列固定之后滚动条无法滚动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

element-ui table表格增加合计行和表格列固定之后滚动条无法滚动

是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table__body-wrapper层覆盖 el-table__fixed或el-table__fixed-right层级较高因此点击滚动条失效
解决方法：

// 这样点击事件就能穿透上层元素，可点击到被遮挡元素，
/deep/ .el-table__fixed {
pointer-events: none;
}
/deep/ .el-table__fixed-right {
pointer-events: none;
}

若想设置滚动条样式

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 8px; // 横向滚动条
height: 8px; // 纵向滚动条
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
}

若想合并合计行的列

<el-table
ref="table"
:data="tableData"
border
show-summary
:span-method="arraySpanMethod"
:summary-method="getSummaries"
:max-height="tableHeight"
>
</el-table>
methods:{
arraySpanMethod() {
this.$nextTick(() => {
if (this.$refs.table.$el) {
const current = this.$refs.table.$el
.querySelector('.el-table__footer-wrapper')
.querySelector('.el-table__footer');
const cell = current.rows[0].cells;
// 若想合并几行就将几个隐藏
cell[1].style.display = 'none';
cell[2].style.display = 'none';
cell[3].style.display = 'none';
cell[4].style.display = 'none';
cell[5].style.display = 'none';
cell[6].style.display = 'none';
cell[0].colSpan = '7'; // 数量对应上方隐藏的格子
}
});
},
// 自定义行
getSummaries(param) {
if (!this.tableTotal) return [];
const { columns } = param;
const sums = [];
columns.forEach((column, index) => {
// 前六列
if (index <= 6) {
sums[index] = '';
// 去掉序号
sums[index] = index === 1 ? '汇总信息' : '';
} else if (column.property === 'allSinglesum') {
sums[index] = this.tableTotal.AllSum;
} else {
sums[index] = this.tableTotal[`${column.property}AllSum`]
? this.tableTotal[`${column.property}AllSum`] : '--';
}
});
// 返回和列的数量相等的数组
return sums;
},
}