Use With Element UI

There were some issues before regarding how to use this plugin with the table component of the Element UI, so here is a case for reference.

It is easy to use this plugin with the standard table component! Just place the InfiniteLoading component under the table component, but we need to pay attention to the following 2 points when writing a template if we use this plugin with the scrollable table component:

Place the InfiniteLoading component at the end of the table component via a slot named append in the Element UI table component;
Set the forceUseInfiniteWrapper property to the CSS selector of the real scroll container. Because the scroll bar of the Element UI table component is enabled dynamically according to the content height, this plugin cannot find the correct scroll container automatically.

WARNING

If there are multiple Element UI table components on the same page, we need a more detailed CSS selector instead of the .el-table__body-wrapper .el-scrollbar__wrap. If not, this plugin may find an error table component as the scroll container

The final template should be similar to:

html

<div id="app">
  <el-table>
    <!-- el-table-column items -->

    <infinite-loading
      v-slot:append
      @infinite="infiniteHandler"
      force-use-infinite-wrapper=".el-table__body-wrapper .el-scrollbar__wrap">
    </infinite-loading>
  </el-table>
</div>

No special handling is required in the logic. This plugin should alread work, just like the preview on the right!

Demo

No Data

<template>
  <el-table
    :data="list"
    height="624"
    border>
    <el-table-column
      prop="title"
      label="Hacker News Title">
    </el-table-column>
    <el-table-column
      prop="author"
      label="Author"
      width="125">
    </el-table-column>

    <template #append>
      <infinite-loading
        @infinite="infiniteHandler"
        force-use-infinite-wrapper=".el-table__body-wrapper .el-scrollbar__wrap">
      </infinite-loading>
    </template>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
// import InfiniteLoading from '@'
import InfiniteLoading from '../../lib'
import { ElTable, ElTableColumn } from 'element-plus'
import 'element-plus/es/components/table/style/css'

const page = ref(0)
const list = ref([])
const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

const infiniteHandler = ($state) => {
  console.log(111)
  axios.get(api, {
    params: {
      page: page.value,
    },
  }).then(({ data }) => {
    if (data.hits.length) {
      page.value += 1;
      list.value.push(...data.hits);
      $state.loaded();
    } else {
      $state.complete();
    }
  });
}
</script>

Use With Element UI ​

Demo ​

Use With Element UI

Demo