vue-data-tables
Version:
A simple, customizable and pageable table, based on vue2 and element-ui.
56 lines (45 loc) • 1.38 kB
Markdown
# Pagination
> customize pagination
`pagination-def` can be leveraged to define pagination.
```html
/*vue*/
<desc>
define item count of each page to 1, pageSize options is [1, 2, 3], default page is 2
</desc>
<template>
<data-tables :data="data" :pagination-def="paginationDef">
<el-table-column v-for="title in titles"
:prop="title.prop"
:label="title.label"
:key="title.prop"
sortable="custom"/>
</data-tables>
</template>
<script>
export default {
data() {
return {
data,
titles,
paginationDef: {
pageSize: 1,
pageSizes: [1, 2, 3],
currentPage: 2
}
}
}
}
</script>
```
# Related properties
`data-tables` property
| Property | Desc | Type | Default value |
| ------------- | ------------- | --- | --- |
| pagination-def | customize pagination | Object | - |
`pagination-def` object property
| Property | Desc | Type | Accepted Values | Default value |
| ------------- | ------------- | --- | --- |
| pageSize | item count of each page | Number | - | 20 |
| pageSizes | options of item count per page | Array of Number | - | [20, 50, 100] |
| currentPage | current page | Number | - | 1 |
| layout | layout of Pagination, elements separated with a comma | Number | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |