vue分页器组件编写方法详解

前端  /  管理员 发布于 4年前   422

使用vue编写的分页器组件，支持输入页码跳转，效果如图：

1、点击前五页：

2、点击中间部分页面

3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效

组件调用：

//html调用 参数:pageSize(总页数);pageNo(当前页)//组件引入import pager from '../../component/pager/pager.vue'//组件调用声明components:{ pager}//参数data(){ return {  pageSize: 30,  pageNo: 2 }}//接收跳转事件methods:{ jump(id){  console.log(id) },}

组件编写

pager.vue：

完整代码可下载：vue分页器组件

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

您可能感兴趣的文章:

• Vue分页器实现原理详解
• vue实现分页栏效果
• Vue form 表单提交+ajax异步请求+分页效果
• 利用vue + element实现表格分页和前端搜索的方法
• 基于Vue.js的表格分页组件
• Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
• vuejs2.0实现一个简单的分页示例
• Vue.js实现无限加载与分页功能开发
• 用Vue写一个分页器的示例代码
• Vue+element-ui 实现表格的分页功能示例