[ElemeFE/element]table filter 位置偏移

2024-08-13 380 views
0
ElementUI version

1.1.6

OS/Browers version

window7 chrome56 macOs chrome56

Vue version

2.1.6

Reproduction Link

image

Steps to reproduce

如图过滤框位置偏移,没有手动改变浏览器窗口大小,有时位置正确,错误概览40%

What is Expected?

位置正确

What is actually happening?

回答

5

Link的位置光放了图

0

没有Link,放错地方了

7

@liril-net 通过调试发现位置错误是因为点击展开popper的区域不一样。在popper.js文件中构造函数Popper获得的reference实参不同,如果点击三角reference的值是<span class="el-table__column-filter-trigger"></span>;点击除三角之外的地方reference的值是<th class="el-table_1_column_2 is-leaf"></th>;因为reference的值不同,导致在Popper.prototype._getOffsets = function (popper, reference, placement) {{....}函数中计算popperOffsets.left出现错误。

5

发现是table-header.js的handleHeaderClick函数问题,column.filters && !column.sortable为真的话,执行this.handleFilterClick(event, column); 但是这里的event是handleHeaderClick的event, 导致filterPanel.cell的值是th,从而导致构造函数Popper实参reference值错误,popper位置错误。

3

我也是,有解吗-,-

5

同样有这个问题,请问怎么解决? image

0

Please provide a demo.

9

我现在用了另外一个方法,看了 @214132049 对源码的看法,解决方案是让 th 里面的 .cell 撑满整个 th

.el-table th { padding: 0; }

.el-table th .cell { line-height: 50px; height: 50px; margin: 0; padding: 0 18px; }

@arronf2e 看看能不能解决?

当然问题的源头还是要改源码了。。

7

@Leopoldthecoder 如果没点在filter的箭头上,而是点在header上,filter-panel就会错位。官网例子上也可以重现这个问题,点在箭头上和点在header上位置会不同。

一旦popover展开过一次位置就不会再变了,所以要重复尝试的话需要刷新。

7

The bug with Popper.js and tables has been fixed in 1.11.0

2

没有重现案例,做关闭处理。