虽然 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>