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-tableref="table":data="tableData"bordershow-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;},
}

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

antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶......
2019独角兽企业重金招聘Python工程师标准>>> FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的 ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
将el-table表格的合计行放到首行
element-ui 的table表格的合计行是放在最后一行的,便于数据的直观显示,需求就会要求将合计行放到首页,方法如下: 添加以下两行CSS,即可将合计行放在第一行: /* /deep/ 为深度操 ...

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

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

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

最新文章

热门文章

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

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

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

最新文章

热门文章

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

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

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