[ElemeFE/element]table filter 位置偏移

2024-08-13 361 views
7
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?

回答

3

Link的位置光放了图

6

没有Link,放错地方了

3

@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出现错误。

9

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

1

我也是,有解吗-,-

8

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

9

Please provide a demo.

3

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

.el-table th { padding: 0; }

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

@arronf2e 看看能不能解决?

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

0

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

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

1

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

7

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