search

ElemeFE / vue-infinite-scroll

An infinite scroll directive for vue.js.
2.86k stars 416 forks source link

unable to use vue-infinite-scroll with element-ui 2.4.8 #108

Closed Paul-Kijtapart closed 6 years ago

Paul-Kijtapart commented 6 years ago

Version Element-UI version: 2.4.8 (latest) vue-infinite-scroll: 2.0.2 (latest) Vue: 2.5.17

Browser Chrome

Problem vue-infinite-scroll stops working with the el-table after upgrading the element-ui to latest version.

According to the changelog, an upgrade to element-ui 2.0.0 introduces 'Table : append slot is moved outside the tbody element to avoid multiple rendering'.

What I expect? By placing a dom with vue-infinite-scroll as the last item in the el-table (use 'slot=append'), when a user scrolls down to the last row of the table, a callback (e.g. 'loadMore') should be triggered to load more data.

I believe this issues happens because the vue-infinite-scroll does not recognize the table's vertical scroll bar of the 'el-table__body-wrapper'.

What actually happens? When a user scrolls down to the last item in the 'append' slot, 'loadMore' does not get triggered. However, when i change the screen size to mobile (which triggers page-vertical scroll - outermost), vue-finite-scroll starts to react to the page vertical scroll ( html tag's vertical scroll bar).

Jsfiddle I put together this example

For some reason, the loadMore seems to be triggered properly when a user scrolls to the end of the table here. I assume I need to use some CSS for the latest element-ui to work with this plugin.

I am wondering if anyone ran into similar issues after updating element-ui to latest version 2.4.8.

Any help is appreciated.

Paul-Kijtapart commented 6 years ago

Found the issue: this is b/c of the new theme 'theme-chalk' has overflow as 'hidden'. As a result, the parentScroll is tranversed up until it stops at the highest one 'html' tag.

Solution set 'overflow-y: auto/scroll' on the parent DOM you want this item to work with.