Vue项目中常见问题(30)分页器完成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

1.替换数据

2.那么total怎么得到呢

3.子给父通信

 分析1:

 分析2:

点击上一页按钮

点击1按钮

 ...不用点

中间部分数字按钮

 点击总页数

 点击下一页

3.整理数据,发请求 

4.点击按钮改变颜色

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

1.替换数据

由于我们以前在pages/Search/index.vue中,我们的数据是写死的,所以现在我们要把它们进行替换

由于我们当前页默认是第一页

 由此我们得到了pageNo和pageSize

2.那么total怎么得到呢

我们可以在Search仓库中看到total的数据

在pages/Search/index.vue中: 

在父组件Search中我们要拿到仓库中的数据,我们得映射为组件实例身上的属性,利用mapState

 在computed计算属性中这样写:

state.search.searchList.total是从下图来的:这就是服务器仓库中的真实数据

我们会发现经过上面的操作后我们的组件Search中拿到了total

 所以total的数据我们就可以放到页面中,进行替换

3.子给父通信

分页器是在Search组件中的,分页器是子组件,Search是父组件,我们要实现点击分页器实现页面的更新变化,涉及到了子给父通信,那么就要利用到自定义事件

我们定义一个方法,让子组件把当前页通知给父亲,因为我们点击切换哪页,哪页就是当前页

 在methods中定义一个方法:

 在components/Pagination/index.vue中:

分析1:

上一页这个按钮是时而能点时而不点的,比如当前页已经是第一页了,就不能点了

 所以我们在上一页按钮中加一个属性

 分析2:

点击上一页按钮

如果当前页是第8页,我们点击上一页按钮,那么当前页会变成第7页

 在上一页这里绑定一个点击事件,通过$emit自定义事件,把我们子组件中触发的事件,传给Search中的

一图看懂业务:

点击1按钮

我们同样绑定点击事件,点1的时候,我们给父组件传递参数1就可以了

效果:

 ...不用点

中间部分数字按钮

我们中间部分点击谁,就传谁给父组件就可以了

 点击总页数

点击总页数,那就是传总页数的数据给父组件 

 点击下一页

当我们当前页等于总页数的时候,就不能点击了

点下一页的时候pageNo+1,当前页+1

3.整理数据,发请求 

现在不管我们点击谁都可以拿到当前页的页码了

现在我们需要把服务器带的参数整理一下,在发请求就可以了

在Search父组件中的methods中:

 测试:

我们会发现我们现在不管点哪个按钮都没问题了,都会获取到对应的数据 

4.点击按钮改变颜色

我们需要点击按钮的时候,使按钮有一个背景颜色

 然后再样式中:

效果实现:

 然后我们把默认改为第一页:

 子组件分页器完整代码:

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！