Element: [Bug Report] table has lock table header, lock table column, and can not scroll when combined.

[denonzhu]

Element UI version

2.4.6

OS/Browsers version

chrome

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/mmx38qxw/5683/

Steps to reproduce

见重新连接

What is Expected?

被锁表列的横向滚动条能点击滚动

What is actually happening?

出现横向滚动条的时候，被锁表列的滚动条部分被遮挡了，无法滚动

[element-bot]

Translation of this issue:

Element UI version
2.4.6

OS/Browsers version
Chrome

Vue version
2.5.17

Reproduction Link
https://jsfiddle.net/mmx38qxw/5683/

Steps to reproduce
See reconnection

What is Expected?
The horizontal scroll bar listed in the lock table can click scroll.

What is actually happening?
When a horizontal scroll bar appears, the scroll bar part of the locked table column is obscured and unable to scroll.

[denonzhu]

该区域无法点击滚动

[denonzhu]

分析原因还是由于锁的表列把表格内容区域遮挡,导致滚动条无法点击,希望官方能快点修复

[ziyoung]

Duplicate of #7564

[andyaccount]

一直关注这个bug，今天来看，发现这个bug被简单合并到了另一个很久之前的问题上。最新的2.4.7版本也没有解决这个bug，请问现在有什么暂时性的解决方案吗？

[denonzhu]

我这个问题跟 ＃7564 还不太一样，这是个滚动条被浮动列给挡住了 浮动列的位置 没法点击滚动条

[denonzhu]

一直关注这个bug，今天来看，发现这个bug被简单合并到了另一个很久之前的问题上。最新的2.4.7版本也没有解决这个bug，请问现在有什么暂时性的解决方案吗？

这个问题目前没法解决，是table组件布局问题，看过ivews的table相关布局 就不会出现这个问题

[andyaccount]

找到一个简单的解决办法，给图中这个元素添加z-index：3；这个属性，就是把带有滚动条的容器的z-index值与固定列的z-index值统一。

[ziyoung]

@denonzhu 我打开你这个链接：https://jsfiddle.net/mmx38qxw/5683/ ，发现跟 #7564 很像。你再补充个链接吧，我把 issue 重新打开。

[ziyoung]

补充个链接：https://jsfiddle.net/xtqbpmLe/

[denonzhu]

https://jsfiddle.net/mmx38qxw/5683/

图上标记的位置 是没法点击的滚动条的

[denonzhu]

https://jsfiddle.net/mmx38qxw/5683/

图上标记的位置 是没法点击的滚动条的

由于锁了表列 并且有合计,导致在table出现横向滚得的时候，被锁的表列的滚动条部分没发点击

[denonzhu]

找到一个简单的解决办法，给图中这个元素添加z-index：3；这个属性，就是把带有滚动条的容器的z-index值与固定列的z-index值统一。

这个方案试过了，是可以的只需要在全局样式表里面加入

.is-scrolling-left{
  z-index: 3;
}

这个是对锁左列起作用，右列的应该是 .is-scrolling-right

[chunmu]

@denonzhu 好像不行诶 你确定有效果吗

[TY-LIU]

看了楼上，只有全局加入这个，希望官方尽快修复 。我是2.4.8版本
.is-scrolling-left, .is-scrolling-right { /fixBug 当el-table左边，右边存在固定列时被遮住部分滚动条不能拖动/
z-index: 3;
}

[TY-LIU]

@ziyoung 全局使用了
.is-scrolling-left{
z-index: 3;
}会造成表格中的内容会遮住固定列的阴影

[ziyoung]

layui 的 table 「合计」那一行没有固定。就完全不用担心这个问题了。😂https://www.layui.com/demo/

[Eflet]

试试这个，我觉得比调整zinde好用，全局css加上这个：

.el-table {
  .el-table__fixed {
    pointer-events: none;
    > * {
      pointer-events: auto;
    }
  }
}

用css禁用掉鼠标事件，然后下一层再全部放开鼠标事件
@ziyoung
我目前项目需要这个footer也fix起来，这个功能很好请别取消掉，如果要去掉也请给个flag控制下

[ziyoung]

另一种解决方案：#15471

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.