Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yujinpan/el-table-infinite-scroll
Infinite scroll for el-table.
https://github.com/yujinpan/el-table-infinite-scroll
el-table element-ui infinite-scroll table-infinite-scroll
Last synced: about 1 month ago
JSON representation
Infinite scroll for el-table.
- Host: GitHub
- URL: https://github.com/yujinpan/el-table-infinite-scroll
- Owner: yujinpan
- License: mit
- Created: 2019-10-01T15:01:11.000Z (about 5 years ago)
- Default Branch: v3
- Last Pushed: 2024-07-12T06:49:31.000Z (5 months ago)
- Last Synced: 2024-10-02T06:29:28.349Z (2 months ago)
- Topics: el-table, element-ui, infinite-scroll, table-infinite-scroll
- Language: JavaScript
- Homepage: https://yujinpan.github.io/el-table-infinite-scroll/
- Size: 4.04 MB
- Stars: 187
- Watchers: 4
- Forks: 41
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Support: docs/support.md
Awesome Lists containing this project
- awesome-element-plus - el-table-infinite-scroll - Infinite scroll for el-table. [๐](https://yujinpan.github.io/el-table-infinite-scroll/) (Components & Libraries / Blog Posts)
- awesome-element-plus - el-table-infinite-scroll - Infinite scroll for el-table. [๐](https://yujinpan.github.io/el-table-infinite-scroll/) (Components & Libraries / Blog Posts)
README
# 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](https://yujinpan.github.io/el-table-infinite-scroll)
## vue3 + element-plus
### Install
** Version >= 3 **
```sh
npm install --save el-table-infinite-scroll@3
```
### Usage
#### Global register
```js
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
```vue
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
```
### Example
```vue
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;
}
};
```
### Options
Supported [element-plus/infinite-scroll](https://element-plus.org/zh-CN/component/infinite-scroll.html#ๆไปค) all options.
## vue2 + element-ui
### Install
** Version ^ 2 **
```sh
npm install --save el-table-infinite-scroll@2
```
### Usage
#### Global register
```js
import Vue from "vue";
import ElTableInfiniteScroll from "el-table-infinite-scroll";
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);
```
#### Component register
```vue
import ElTableInfiniteScroll from "el-table-infinite-scroll";
export default {
directives: {
"el-table-infinite-scroll": ElTableInfiniteScroll,
},
};
```
### Example
```vue
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;
}
},
},
};
```
### Options
Supported [element-ui/infinite-scroll](https://element.eleme.cn/#/zh-CN/component/infiniteScroll#attributes) all options.
## Contribution
Thanks to [JetBrains](https://www.jetbrains.com/?from=el-table-infinite-scroll) for supporting my free open source license.
