Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
el-table-infinite-scroll
Advanced tools
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 ofElTable
.
https://yujinpan.github.io/el-table-infinite-scroll
** Version >= 3 **
npm install --save el-table-infinite-scroll@3
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-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>
Supported element-plus/infinite-scroll all options.
** Version ^ 2 **
npm install --save el-table-infinite-scroll@2
import Vue from "vue";
import ElTableInfiniteScroll from "el-table-infinite-scroll";
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);
<script>
import ElTableInfiniteScroll from "el-table-infinite-scroll";
export default {
directives: {
"el-table-infinite-scroll": ElTableInfiniteScroll,
},
};
</script>
<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>
Supported element-ui/infinite-scroll all options.
Thanks to JetBrains for supporting my free open source license.
FAQs
Infinite scroll for el-table.
We found that el-table-infinite-scroll demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.