UNPKG

vue-data-tables

Version:

A simple, customizable and pageable table, based on vue2 and element-ui.

56 lines (45 loc) 1.38 kB
# 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' |