Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] The location of the Table filter-panel is incorrect #6159

Closed
wind928 opened this issue Jul 31, 2017 · 3 comments
Closed

[Bug Report] The location of the Table filter-panel is incorrect #6159

wind928 opened this issue Jul 31, 2017 · 3 comments

Comments

@wind928
Copy link

wind928 commented Jul 31, 2017

Element UI version

1.4.1

OS/Browsers version

windows7 / all

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/41cc3ewk/

Steps to reproduce

jsfiddle中的例子仿照官网文档的例子,含有过滤属性的是“标签”那一列
1、等待页面加载好后,点击header的空白区域(而不是下箭头),filter-panel会出现在列的最右端,而不是箭头下方
2、刷新页面,点击过滤的下箭头,则filter-panel会出现在箭头下方

What is Expected?

无论是点击哪里,展开的filter-panel都应出现在箭头的下方

What is actually happening?

当页面刷新后,点击下箭头时,filter-panel出现的位置正确。
如果第一次点击是在header的空白区域时,则filter-panel的位置就会出现在列的最右边。

问题的原因在#3132中已经查明,原因是filter-panel的位置是根据第一次点击的event.target决定的,当点击header的空白区域时,实际传给filter-panel的target是header而不是filter箭头,因此filter-panel的位置会根据header的位置来设定

@element-bot element-bot changed the title [Bug Report] Table的filter-panel出现的位置不正确 The location of the [Bug Report] Table filter-panel is incorrect Jul 31, 2017
@element-bot
Copy link
Member

Translation of this issue:

Element UI version

1.4.1

OS/Browsers version

Windows7 / all

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/41cc3ewk/

Steps to reproduce

The example in jsfiddle follows the example of the official website document, which contains the column "tag" of the filter attribute

1 wait until the page is loaded, click the blank space of the header (not the lower arrow), and the filter-panel will appear at the bottom right of the column, not below the arrow
2. Refresh the page, click the filtered down arrow, and the filter-panel will appear below the arrow

What is Expected?

Wherever you click, the unfolded filter-panel should appear below the arrow

What is actually happening?

When the page is refreshed, when you click the down arrow, filter-panel appears in the right place.

If the first click is in the blank space of the header, then the filter-panel position appears on the rightmost side of the column.
The cause of the problem in #3132 has been identified, the reason is the location of the filter-panel is based on the first click the event.target decision, when click on a blank area of header, the actual pass to filter-panel target header instead of filter arrow, so filter-panel will position according to the header position to set

@wind928 wind928 changed the title The location of the [Bug Report] Table filter-panel is incorrect [Bug Report] The location of the Table filter-panel is incorrect Jul 31, 2017
@codejc
Copy link

codejc commented Jan 4, 2018

My solution is put the css property "pointer-events: none" into class ".el-table__column-filter-trigger" in "el-reset.less" file.

@ziyoung
Copy link
Contributor

ziyoung commented Sep 26, 2018

@wind928 最新版本的 2.4.7 中并不能重现该问题 https://jsfiddle.net/41cc3ewk/8/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants