Using `vue-infinite-loading` with tables

[a-kriya]

First of all, thank you for this awesome and easy-to-use component.

I'm trying to use infinite-loading with ElementUI's fixed-header table. It works fine with a regular table, but as I'm aware, the infinite-loading component needs to be a child of a scrollable element to work properly, which would not be the case if placed next to ElementUI's table component with a fixed header as it separates out the table-body wrapper.

Demo: https://jsfiddle.net/frya0fLz/

One of the solutions I thought of would be to have a slot inside the table-body wrapper, but had trouble trying it out.

Would it be possible to have infinite-loading component hook into the generated element of ElementUI's table?

[PeachScript]

Thanks for appreciation!

I think this problem can be solve if the ElementUI support slots for the table-body, this is the right way, but it only support a simple hidden slot for the table container at this time, perhaps you should make an issue for ElementUI.

And there has another way to fix it with $refs feature, but it's so ugly that I cannot suggest to you :(

[a-kriya]

Yeah, I was able to make it work with a slot placed after line 34 in Table.vue file. It does seem like the simplest and most intuitive solution. Thanks!

[a-kriya]

I had requested this extra slot in ElementUI, and they've added it, but not next to the table itself and rather inside it (as there were some other uses for it there).

I thought it wouldn't matter, as vue-infinite-loading will retrieve the same parent in either case -- el-table__body-wrapper as it is the first ancestor of this component with overflowY set to auto:

However, this component is unable to detect that enough rows have been loaded and continues calling the on-infinite handler, as seen here: https://jsfiddle.net/frya0fLz/2/

Re-opening as I think this new issue can be resolved in this component than ElementUI. Thoughts?

[PeachScript]

I noticed that on-infinite handler will be executed double times in each calling, so I think something wrong here.

[a-kriya]

Yeah. Do you know what is the best way to debug pluggable components like this?

[PeachScript]

I found some informations, Element-UI will re-render the component that append by slot="append" when every time the data changes.

[PeachScript]

You can debug it in your local computer with source code and vue-devtool, you also can debug it on the jsfiddle with your local vue-infinite-loading.js.

[a-kriya]

What do you mean by "local vue-infinite-loading.js?
Also, thank you for looking into this. I'll be cross-posting the issue at ElemeFE/element#4261

[PeachScript]

You're welcome!

Local vue-infinite-loading.js just means the dist file from the source code in your local computer, you can execute npm run dev in the source code directory then use http://localhost:8000/dist/vue-infinite-loading.js as resource url in the jsfiddle, and you can debug it through edit source code, don't forget change protocol from https to http for the jsfiddle.

[a-kriya]

Oh, very interesting. Never thought about using local server that way, haha.
I'll keep this thread updated as the issue gets further response/resolution.

[a-kriya]

@PeachScript
Leopoldthecoder, one of the ElementUI maintainers, updated the issue thread linked above with some new findings. Can you please check it out?
He says that the problem caused due to re-render is now gone in Vue 2.3.3. The remaining problem seems to be related to this component not being able to detect that enough rows have been loaded, and continues calling onInfinite (although only once, now).