【Element】el-table 使用 el-table-infinite-scroll 插件实现滚动加载-编程知识

【Element】el-table 使用 el-table-infinite-scroll 插件实现滚动加载

虽然 el 官方提供了 Infinite Scroll 无限滚动 组件
在这里插入图片描述
但是却不支持 el-table 组件，这就很难受了，还好已经有大佬写好了插件，并且支持 element-plus/infinite-scroll 组件的所有选项。

el-table-infinite-scroll

在这里插入图片描述
el-table-infinite-scroll

看文档就行

安装

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

全局注册

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");

组件注册

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

使用例子

<template><el-tablev-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>