el-table-infinite-scroll(vue3)

Infinite scroll for el-table.

This directive only does event forwarding, which is equivalent to replacing the target DOM of ElInfiniteScroll with the scroll layer of ElTable.

Support

• vue3 + element-plus
• vue2 + element-ui

Install

npm install --save el-table-infinite-scroll

Usage

Global register

import { createApp } from "vue";
import App from "./src/App.vue";

import ElTableInfiniteScroll from "el-table-infinite-scroll";

const app = createApp(App);

app.use(ElTableInfiniteScroll);
app.mount("#app");

Component register

<template>
  <el-table v-el-table-infinite-scroll="load"></el-table>
</template>

<script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
</script>

Example

Scroll table to bottom to load paginated data.

Click me to show code

Options

Supported element-plus/infinite-scroll all options.

Infinite Scroll Up

<template>
  <el-table
    v-el-table-infinite-scroll-up="{
      load,
      disabled,
    }"
  ></el-table>
</template>

<script setup>
import { default as vElTableInfiniteScrollUp } from "el-table-infinite-scroll/lib/es/el-table-infinite-scroll-up";
</script>

Scroll table to up to load paginated data.

Click me to show code