mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-10 12:01:57 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
# Pagination <Badge text="v3.9.2+"/>
|
|
|
|
Pagination component is mainly based on Element 'el-pagination' for the secondary packaging, and expanded the function of auto-scroll.
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<template>
|
|
<pagination
|
|
:total="total"
|
|
:page.sync="listQuery.page"
|
|
:limit.sync="listQuery.limit"
|
|
@pagination="getList" />
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from '@/components/Pagination'
|
|
|
|
export default {
|
|
components: { Pagination },
|
|
data() {
|
|
return {
|
|
total: 0,
|
|
listQuery: {
|
|
page: 1,
|
|
limit: 20
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getList() {
|
|
// Fetch data
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Attributes
|
|
|
|
| Attribute | Description | Type | Default |
|
|
| :---------: | :---------------------------------------------------------- | :-------: | :-------------: |
|
|
| total | total item count | Number | / |
|
|
| page | current page number, supports the .sync modifier | Number | 1 |
|
|
| limit | item count of each page, supports the .sync modifier | Number | 20 |
|
|
| page-sizes | options of item count per page | Number [] | 10, 20, 30, 50] |
|
|
| hidden | whether to hide | Boolean | false |
|
|
| auto-scroll | whether to automatically scroll to the top after pagination | Boolean | true |
|
|
|
|
Other attributes of the element's `el-pagination` support are also supported. See [Documentation](http://element.eleme.io/#/zh-CN/component/pagination) for details.
|
|
|
|
## Events
|
|
|
|
| Event Name | Description | Parameters |
|
|
| ---------- | ---------------------------------------- | ------------ |
|
|
| pagination | Triggered when the limit or page changes | {page,limit} |
|
|
|
|
## Source Code && Demo
|
|
|
|
- [Source Code](https://github.com/adempiere/adempiere-vue/blob/master/src/components/Pagination/index.vue)
|
|
|
|
- [Online Demo](https://adempiere.github.io/adempiere-vue/#/table/complex-table)
|