el-table-infinite-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    el-table-infinite-scroll

    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.

    Documentation

    https://yujinpan.github.io/el-table-infinite-scroll

    vue3 + element-plus

    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

    <template>
      <el-table
        v-el-table-infinite-scroll="load"
        :data="data"
        :infinite-scroll-disabled="disabled"
        height="200px"
      >
        <el-table-column type="index" />
        <el-table-column prop="date" label="date" />
        <el-table-column prop="name" label="name" />
        <el-table-column prop="age" label="age" />
      </el-table>
    </template>
    
    <script setup>
    import { ref } from "vue";
    
    const dataTemplate = new Array(10).fill({
      date: "2009-01-01",
      name: "Tom",
      age: "30",
    });
    
    const data = ref([]);
    const disabled = ref(false);
    const page = ref(0);
    const total = ref(5);
    
    const load = () => {
      if (disabled.value) return;
    
      page.value++;
      if (page.value <= total.value) {
        data.value = data.value.concat(dataTemplate);
      }
    
      if (page.value === total.value) {
        disabled.value = true;
      }
    };
    </script>

    Options

    Supported element-plus/infinite-scroll all options.

    vue2 + element-ui

    Install

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

    Usage

    Global register

    import Vue from "vue";
    
    import ElTableInfiniteScroll from "el-table-infinite-scroll";
    
    Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);

    Component register

    <script>
    import ElTableInfiniteScroll from "el-table-infinite-scroll";
    
    export default {
      directives: {
        "el-table-infinite-scroll": ElTableInfiniteScroll,
      },
    };
    </script>

    Example

    <template>
      <el-table
        v-el-table-infinite-scroll="load"
        :data="data"
        :infinite-scroll-disabled="disabled"
        height="200px"
      >
        <el-table-column type="index" />
        <el-table-column prop="date" label="date" />
        <el-table-column prop="name" label="name" />
        <el-table-column prop="age" label="age" />
      </el-table>
    </template>
    
    <script>
    const dataTemplate = new Array(10).fill({
      date: "2009-01-01",
      name: "Tom",
      age: "30",
    });
    
    export default {
      data() {
        return {
          data: [],
          page: 0,
          total: 5,
        };
      },
      methods: {
        load() {
          if (this.disabled) return;
    
          this.page++;
          if (this.page <= this.total) {
            this.data = this.data.concat(dataTemplate);
          }
    
          if (this.page === this.total) {
            this.disabled = true;
          }
        },
      },
    };
    </script>

    Options

    Supported element-ui/infinite-scroll all options.

    Contribution

    Thanks to JetBrains for supporting my free open source license.

    JetBrains

    Install

    npm i el-table-infinite-scroll

    DownloadsWeekly Downloads

    2,638

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • yujinpan