Vue分页器组件使用方法详解

本文实例为大家分享了Vue分页器组件的使用，供大家参考，具体内容如下

效果图如下：

 鼠标悬浮时切换为箭头：

①创建自定义分页组件Pager.vue：预设主题色为@themeColor: #D93844; 每页展示10条数据，一次最多显示5个页码，支持输入页码跳转：

②在要使用的页面引入分页器：

    

 
import Pager from '@/components/Pager'
components: {
    Pager
}
totalCount: 0,
queryParams: {
        pageSize: 10,
        p: 1,
        mod: 'search'
},
 
jumpPage (e) {
      this.queryParams.p = e.currentPage
      this.queryParams.pageSize = e.currentSize
      this.getDataLists() // 调用接口获取列表数据
}
 
.m-page {
  margin: 30px auto 60px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。