[Feature Request] Extra slot under el-table__body-wrapper to support infinite scroll plugins

[a-kriya]

Existing Component

Yes

Component Name

Table

Description

The first two infinite-scroll plugins listed at awesome-vue:

• vue-infinite-loading
• vue-mugen-scroll

Both components require to be placed directly under a scrollable container to work. Element UI's Table component currently has no placeholder for these plugins, so an infinite loading table with these plugins is not possible as of yet: https://jsfiddle.net/frya0fLz/

I've already tested that a simple slot component placed under el-table__body-wrapper between line 34 and 35 works well: Table.vue:34. Is this a "feature" that is acceptable to be included in Element?

[Leopoldthecoder]

Chances are that you'll see this extra slot in version 1.3.0

By the way, since you've been testing, could you place the slot between line 37 and 38 and see if it also works well? Additionally, does it work well when you have fixed columns? Thanks.

[a-kriya]

For the first case, it only seems to work when placed directly after the table, between line 34 and 35.

For the second case, the rows get mis-aligned towards the bottom of the table due to the spinner from the plugin:

[a-kriya]

@Leopoldthecoder I'm trying to test Table component's append slot with the infinite loading component, but there is something strange that happens on JSFiddle but not on my local environment.

The row element on my local environment does get appended to tbody, and I see the spinner:

But on JSFiddle, the tr element with slot="append" is not appended to tbody. I wanted to reproduce what happens on my local environment with the new slot, but cannot because of this discrepancy. Any ideas?

[Leopoldthecoder]

@Syn-zeta I've no idea why it's not appended in JSFiddle, though wrapping the tr with a template seems to make it work: https://jsfiddle.net/frya0fLz/2/

And I think your real problem is that onInfinite gets constantly invoked?

[a-kriya]

Oh, thanks for the template hint. And yes, that is the real problem, but I think it falls more on the author of the infinite loading component, so I've created a issue there. I'll update/close this thread as I get some response/resolution.

[Leopoldthecoder]

I checked the infinite loading repo and found that the author has plans to allow setting the scroll parent element manually. I think it may be promising, thought I haven't really looked into it.

[a-kriya]

@Leopoldthecoder It seems that it is not an issue with detecting the parent element, but rather, as the author of the plugin mentions here, caused by the Table component re-rendering elements inside slot="append". I assume it is causing the infinite loader to lose its state?

[a-kriya]

@Leopoldthecoder Would you be able to suggest a good way to get around this issue? I would like to try that out and perhaps create a PR. I'm hoping to have this in the next beta release.

[a-kriya]

@QingWei-Li Do you have any suggestions on what could be done here? Leo seems to be busy.

[QingWei-Li]

@Leopoldthecoder

[Leopoldthecoder]

@Syn-zeta Sorry for the delay, I'll take a look this weekend. But re-rendering elements seems inevitable.

[a-kriya]

@Leopoldthecoder It's alright. Please update me on this. Again, if you have any suggestions, I'm willing to work on it and submit a PR that is acceptable.

[Leopoldthecoder]

@Syn-zeta I checked the demo above and found that it now behaves differently. Because Vue has updated:

• Vue 2.3.0: https://jsfiddle.net/frya0fLz/3/
• Vue 2.3.3: https://jsfiddle.net/frya0fLz/4/

The problem @PeachScript described in PeachScript/vue-infinite-loading#43 (comment) is gone. But still, on-infinite gets called constantly.

[a-kriya]

@Leopoldthecoder Thank you for looking into this. The remaining issue was fixed in vue-infinite-loading.