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).

[PeachScript]

@Syn-zeta I have merged your PR, but it cannot work properly when the scroll parent is window, I think the unit tests has some problems, I'm trying to fix it, so the new version will be late 😞

[PeachScript]

@Syn-zeta going well, I have released a new version v2.1.1 contains your solution, you can try it now, thanks for your contribution!

Best regards.

[ckaczor]

This new version doesn't seem to work right in a "normal" table case - it scrolls way too soon. If I use this.$el.offsetTop when calculating the distance it seems good, but the new elOffsetTopFromScrollElm isn't right.

Thanks!

[a-kriya]

@PeachScript Works great, thank you!

@ckaczor
This is what I've tried with a regular table, and it works: https://jsfiddle.net/ezpnr4q8/2/
As you can see, a regular table cannot scroll unless it was wrapped in a container, or its CSS was modified (mainly the display property, at which point it is not exactly a table anymore).
Can you please provide a fiddle?

[ckaczor]

Try this: https://jsfiddle.net/81q6bmLh/2/

Note that it loads well before the bottom of the list. It is especially noticeable as the list gets longer. The 2.1.0 version scrolls down at the bottom as expected.

Thanks again,

Chris

[a-kriya]

@ckaczor
I've updated the fiddle to use unpkg for this component, so we can easily version it.

The issue is clear with 2.1.0 (continues loading): https://jsfiddle.net/81q6bmLh/7/
The issue is fixed in 2.1.1 (does not keep loading): https://jsfiddle.net/81q6bmLh/6/

I'm sorry, I still do not understand what you meant by

2.1.0 version scrolls down at the bottom as expected

[ckaczor]

Updates to match my code better:

2.1.1 - https://jsfiddle.net/81q6bmLh/8/
2.1.0 - https://jsfiddle.net/81q6bmLh/9/

The 2.1.1 version loads more data way before the scrollbar reaches the configured distance. By a few hundred items it is scrolling when the scrollbar is halfway down.

The 2.1.0 version always loads when the scrollbar is within the configured distance. No matter how many items it doesn't load until the scrollbar reaches the bottom.

[a-kriya]

Yes, both versions seem to have an issue. 2.1.0 was faulty when placed inside a td. 2.1.1 is faulty either way. Looking into it. Thanks for pointing it out.

[PeachScript]

Thank you @Syn-zeta @ckaczor ! I have builded a new dist file to try to fix it, and update it on JSFiddle, please help me to review it :)

[a-kriya]

Edit: Woops, didn't reload the page to see that you had already posted a possible fix, @PeachScript. I've commented on the differences between your fix and my patch (below) here.

---

Possibly fixed:
Inside table: https://jsfiddle.net/81q6bmLh/12/
Outside table: https://jsfiddle.net/81q6bmLh/13/

vue-infinite-loader used in the above two fiddles was created by slightly modifying 2.1.1:
fix_2.1.1.patch.zip

I will test it more tomorrow in other scenarios, and will post my findings. Can you guys also try to see if there are any issues in the build used in above two fiddles?

[PeachScript]

@Syn-zeta I tested your patch, it's nice! Could you make a PR to fix it after test in tomorrow?

[PeachScript]

In order not to affect other users, I have deprecated v2.1.1 in npm.

[ckaczor]

@Syn-zeta Both of those test cases look good to me. Tried it with my real code and it looks good there too.

Thanks!

[a-kriya]

So I've tested the patched version with all the examples on the component home page and different attribute values, and I haven't found any issues. This is where I tried out the demos.

I'll create a PR with the patch. Thanks guys.

[PeachScript]

@Syn-zeta nice work, thank you so much!

By the way, I guess you missed my comment in here, any idea about it?

[a-kriya]

@PeachScript I think I tested what you meant in the fiddle that I posted in my previous post above (the Hacker rank demo), unless I misunderstood you?

[PeachScript]

@Syn-zeta after testing, I found my worry is unnecessary, thanks!

[PeachScript]

v2.1.2 released :P

[NoraGithub]

What's the solution with el-table now? I tried but failed. I am afraid have I missed anything ?
@PeachScript

I found the code that (this.$el.offsetWidth + this.$el.offsetHeight) > 0), or it would not trigger loading.

However, if I gave a style="width: 100px" , it triggered loading but never stopped.

Here's my info

"vue-infinite-loading": "^2.1.3",
"element-ui": "^2.0.5",
"vue": "^2.5.3",

Looking forward to your help.

[NoraGithub]

I cannot publish on jsfiddle. My code would like below

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="//rawgit.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js"></script>

<div id="app">
  <template>
    <div>
      <el-table :data="tableData3" height="250" border style="width: 100%">
        <el-table-column v-for="(field, index) in fields" :label="field" width="180" :key="index">
          <template slot-scope="scope">
            <span>{{ scope.row[field]}}</span>
          </template>       
          </el-table-column>
      </el-table>
        <template slot="append">
          <tr>
            <td colspan="3">
              <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>
            </td>
          </tr>
        </template>
    </div>
  </template>
</div>

var Main = {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }],
      }
    },
    methods: {
      onInfinite() {
        setTimeout(() => {
          this.tableData3.push(JSON.parse(JSON.stringify(this.tableData3[0])));
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
        }, 2000);
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')