# Page 分页
---
### 基础用法,页码 <=6 页

<div class="demo-block">
	<y-pagination 
	    :total="totalSmall" 
	    :current-page="pagesSmall" 
	    :page-size="sizeSmall" 
	    :jump-to='jumpToSmall'
	    :pagegroup="group">
	</y-pagination>
</div>
<script>
	export default{
		data(){
			return{
				totalSmall:60,
				pagesSmall:1,
				sizeSmall:10,
				jumpToSmall:1,
				group: 5,
				total:150,
				pages:1,
				size:10,
				jumpTo:1,
			}
		}
	}
</script> 
	
::: demo
``` html
  <y-pagination 
    :total="total" 
    :current-page="pages" 
    :page-size="size" 
    :jump-to='jumpTo'
    :pagegroup="group">
  </y-pagination>
```
```js
<script>
  export default {
		data() {
			return {
				total:60,
				pages:10,
				size:5,
				jumpTo:1,
				group: 5,
			}
		}
	}
</script>
```



:::
### 基础用法,页码 >6 页
<div class="demo-block">
  <y-pagination 
    :total="total" 
    :current-page="pages" 
    :page-size="size" 
    :jump-to='jumpTo'
    :pagegroup="group"
    >
  </y-pagination>
  <div class="pages-set">
  	  <span>设置数据总条数：</span>
      <y-input placeholder="请输入" v-model="total"></y-input>
   </div>
</div>
	
::: demo
``` html
<template>
  <y-pagination 
    :total="total" 
    :current-page="pages" 
    :page-size="size" 
    :jump-to='jumpTo'
    :pagegroup="group">
  </y-pagination>
  </template>
```

```js
<script>
  export default {
		data() {
			return {
				total:150,
				pages:10,
				size:5,
				jumpTo:1,
				group: 5,
				pageVal: 10
			}
		}
	}
</script>
```
:::

### y-page 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| total     | 数据总条数     |   number  |  — |  —  | 
| pageSize  | 每页显示条数 | number   |    (10,50,100)    | 10  |
| currentPage      | 当前页码 | number, string   |  —  |  1 |
| jumpTo      | 跳转到 | number   |  —  |  1  |
| pagegroup      | 分页条数 | number   |  —  |  (1,5)  |