Vuli

# Pagination 分页器

# 示例


# 代码

<!-- 可通过elements属性的排列顺序来更改分页器各组件的布局,多个组件之间用','分割 -->
<vu-pagination 
:page="page" 
:sizeList="[5,10,20,30,50,100]" 
elements="last,current,next,size,goto,total"></vu-pagination>

<script>
export default {
  data(){
    return {
      page: {
        current: 1,
        size: 10,
        total: 200
      }
    }
  }
}
</script>

# elements各组件


current 页码：


last 上一页：


next 下一页：


size 每页条数选择器：


goto 页码跳转：


total 总条数文本：


sizeText 每页条数文本：

# 代码

urrent 页码：<vu-pagination :page="page" elements="current"></vu-pagination>

last 上一页：<vu-pagination :page="page" elements="last"></vu-pagination>

next 下一页：<vu-pagination :page="page" elements="next"></vu-pagination>

size 每页条数选择器：<vu-pagination :page="page" elements="size"></vu-pagination>

goto 页码跳转：<vu-pagination :page="page" elements="goto"></vu-pagination>

total 总条数文本：<vu-pagination :page="page" elements="total"></vu-pagination>

sizeText 每页条数文本：<vu-pagination :page="page" elements="sizeText"></vu-pagination>

<script>
export default {
  data(){
    return {
      page: {
        current: 1,
        size: 10,
        total: 200
      }
    }
  }
}
</script>

# Attributes

参数 说明 类型 是否必填 默认值 可选值
page 分页信息 Object 是 -- current:当前页码,size:每页条数,total:总条数(每个参数都是必填的)
elements 需要的分页器元素 String 否 last,current,next,size,total last,current,next,size,
goto,total,sizeText
sizeList size元素列表的每页条数 Array 否 [10,20,50,100] --
sizeDirection size元素列表展开方向 String 否 top top,bottom

# Events

事件名 触发条件 回调参数
pageChange 分页信息改变 改变后的分页信息
currentChange 页码改变 改变后的页码
sizeChange 每页条数改变 改变后的每页条数
totalChange 总条数改变 改变后的总条数
last 点击上一页按钮 上一页的页码
next 点击下一页按钮 下一页的页码
currentClick 点击页码 点击的页码
goto 点击跳转按钮 跳转的页码

# Methods

方法名 说明 所需参数 参数说明
setCurrent 设置页码 current --
setSize 设置每页条数 size --
setTotal 设置总条数 total --

← Message 消息 →