feat: add el-table-infinite-scroll demo (#335)

locales/en.yaml

@@ -86,6 +86,7 @@ menus:
   hsVirtualList: Virtual List
   hsPdf: PDF Preview
   hsExecl: Export Excel
+  hsInfiniteScroll: Table Infinite Scroll
 status:
   hsLoad: Loading...
 login:

locales/zh-CN.yaml

@@ -86,6 +86,7 @@ menus:
   hsVirtualList: 虚拟列表
   hsPdf: PDF预览
   hsExecl: 导出Excel
+  hsInfiniteScroll: 表格无限滚动
 status:
   hsLoad: 加载中...
 login:

package.json

@@ -49,6 +49,7 @@
     "dayjs": "^1.11.4",
     "driver.js": "^0.9.8",
     "echarts": "^5.3.3",
+    "el-table-infinite-scroll": "^3.0.1",
     "element-plus": "^2.2.14",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",

pnpm-lock.yaml

@@ -57,6 +57,7 @@ specifiers:
   dayjs: ^1.11.4
   driver.js: ^0.9.8
   echarts: ^5.3.3
+  el-table-infinite-scroll: ^3.0.1
   element-plus: ^2.2.14
   element-resize-detector: ^1.2.3
   eslint: ^8.8.0
@@ -145,6 +146,7 @@ dependencies:
   dayjs: 1.11.5
   driver.js: 0.9.8
   echarts: 5.3.3
+  el-table-infinite-scroll: 3.0.1
   element-plus: 2.2.14_vue@3.2.37
   element-resize-detector: 1.2.4
   js-cookie: 3.0.1
@@ -2330,10 +2332,6 @@ packages:
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
       eslint-plugin-vue: ^8.0.1
-      typescript: "*"
-    peerDependenciesMeta:
-      typescript:
-        optional: true
     dependencies:
       "@typescript-eslint/eslint-plugin": 5.33.1_ac9d23a22d787f7b7991fddcc31412d2
       "@typescript-eslint/parser": 5.33.1_eslint@8.22.0+typescript@4.7.4
@@ -2343,6 +2341,7 @@ packages:
       vue-eslint-parser: 8.3.0_eslint@8.22.0
     transitivePeerDependencies:
       - supports-color
+      - typescript
     dev: true
 
   /@vue/reactivity-transform/3.2.37:
@@ -3502,8 +3501,6 @@ packages:
       finalhandler: 1.1.2
       parseurl: 1.3.3
       utils-merge: 1.0.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /consola/2.15.3:
@@ -3646,8 +3643,6 @@ packages:
       color: 0.11.4
       debug: 3.2.7
       rgb: 0.1.0
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
   /css-declaration-sorter/6.3.0_postcss@8.4.16:
@@ -3862,11 +3857,6 @@ packages:
       {
         integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
       }
-    peerDependencies:
-      supports-color: "*"
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
@@ -3876,11 +3866,6 @@ packages:
       {
         integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
       }
-    peerDependencies:
-      supports-color: "*"
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
     dev: false
@@ -4156,6 +4141,19 @@ packages:
       }
     dev: true
 
+  /el-table-infinite-scroll/3.0.1:
+    resolution:
+      {
+        integrity: sha512-A5zeqo0us1mzAi+bvQsluex2V4BSEf/2a4FuZzkluJWsoqNCIexRVnxcgWVRl/8HaAK9nLGLnkAb//Xox+eLOg==
+      }
+    dependencies:
+      core-js: 3.24.1
+      element-plus: 2.2.14_vue@3.2.37
+      vue: 3.2.37
+    transitivePeerDependencies:
+      - "@vue/composition-api"
+    dev: false
+
   /electron-to-chromium/1.4.222:
     resolution:
       {
@@ -5051,8 +5049,6 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /find-up/4.1.0:

src/router/modules/able.ts

@@ -145,6 +145,14 @@ const ableRouter: RouteConfigsTable = {
       meta: {
         title: $t("menus.hsExecl")
       }
+    },
+    {
+      path: "/able/infiniteScroll",
+      name: "InfiniteScroll",
+      component: () => import("/@/views/able/infinite-scroll.vue"),
+      meta: {
+        title: $t("menus.hsInfiniteScroll")
+      }
     }
   ]
 };

src/views/able/infinite-scroll.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
+
+defineOptions({
+  name: "InfiniteScroll"
+});
+
+const dataTemplate = new Array(10).fill({
+  date: "2022-08-24",
+  name: "RealityBoy",
+  age: "18"
+});
+
+const data = ref([]);
+const disabled = ref(false);
+const page = ref(0);
+const total = ref(10);
+
+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>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="font-medium">
+        表格无限滚动（
+        <el-link
+          href="https://github.com/yujinpan/el-table-infinite-scroll"
+          target="_blank"
+          style="font-size: 16px; margin: 0 5px 4px 0"
+        >
+          github地址
+        </el-link>
+        ）
+      </div>
+    </template>
+    <div>
+      <p class="mb-2">
+        <span>loaded page(total: {{ total }}): {{ page }}, </span>
+        disabled:
+        <el-switch v-model="disabled" :disabled="page >= total" />
+      </p>
+      <el-table
+        v-el-table-infinite-scroll="load"
+        :data="data"
+        :infinite-scroll-disabled="disabled"
+        height="435px"
+      >
+        <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>
+    </div>
+  </el-card>
+</template>