Vue —— 分页器

全局组件：分页器 Pagination

<template><div class="pagination"><button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button><button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button><button v-if="startNumAndEndNum.start > 2">···</button> <!-- 中间部分 --><button v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start"  @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{{page}}</button><button v-if="startNumAndEndNum.end  < totalPage -1">···</button><button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==total}">{{totalPage}}</button><button :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button><button style="margin-left: 30px">共 {{total}} 条</button></div>
</template><script>export default {name: "Pagination",props:['pageNo','pageSize','total','continues'],//计算属性computed:{//总共有多少页totalPage(){// 向上取整return Math.ceil(this.total/this.pageSize);},//计算连续的页码：起始数字 和 结束数字startNumAndEndNum(){const {continues,pageNo,totalPage} = this;//定义起始数字 和 结束数字let start = 0, end = 0;//【不正常现象】总页码数 < 连续页码if(continues > totalPage){start = 1;end = totalPage;}else{//【正常现象】总页码数 >= 连续页码start = pageNo - parseInt(continues/2)end = pageNo + parseInt(continues/2)//start 出现不正常现象【start < 1】if(start < 1){start = 1;end = continues;}//end 出现不正常现象【end > totalPage】if(end > totalPage){start = totalPage - continues + 1;end = totalPage;}}return {start,end};}}}
</script><style lang="less" scoped>.pagination {button {margin: 0 5px;background-color: #f4f4f5;color: #606266;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 13px;min-width: 35.5px;height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;border: 0;&[disabled] {color: #c0c4cc;cursor: not-allowed;}&.active {cursor: not-allowed;background-color: #409eff;color: #fff;}}}
</style>

main.js 中引入并注册全局组件分页器

//引入全局三级联动
......
import Pagination from '@/components/Pagination'
//注册全局组件
......
Vue.component(Pagination.name,Pagination)

父组件 Search 给子组件 Pagination 传分页数据
Search 组件

<template>
......<!-- 分页器 子父互传数据， （props、自定义事件）-->
<Pagination  //父传给子相应的分页数据:pageNo="searchParams.pageNo" :pageSize="searchParams.pageSize" :total="total" :continues="5" //子操作分页组件，将新的分页数据返回给父组件（自定义事件），整理完数据再发请求@getPageNo="getPageNo"
/>
......
</template><script>
import { mapGetters,mapState } from "vuex";export default {name: "Search",data() {return {//带给服务器参数searchParams: {......// 分页的第几页pageNo: 1,// 每页的条数pageSize: 10,},};},components: {SearchSelector,},mounted(){this.getData();//每一次请求完毕，应该把123级分类id置空，让他接收下次请求相对应123级分类id},computed: {......//获取search 模块展示产品一共多少数据 ==> 给分页组件用...mapState({total:state=>state.search.searchList.total})},methods: {//由于搜索功能，向服务器发请求获取search模块数据，会根据每次传递的参数获取不同的数据进行展示，所以dispatch不能放 mounted 里面getData() {this.$store.dispatch("getSearchList", this.searchParams);},......//分页器 给 父组件（this） 传参的自定义事件getPageNo(pageNo){//整理参数this.searchParams.pageNo = pageNo;//发请求this.getData()}},};
</script>

Vue —— 分页器相关推荐

超级详细：一个漂亮的Vue分页器组件的实现
整篇分两个部分: 思路部分:讲解怎么实现分页器组件[大把时间看-建议] 后面部分:按照步骤,直接引入组件[没有时间看-建议] 思路:基于连续页码进行判断需要添加分页器的组件(Search组件)中 & ...
vue遇到的小问题，封装功能
vue vue 首页加载空白页使用vue骨架屏使用骨架屏插件 vue 大数据卡顿 vue 样式初始化normalize.css token过期,无感知刷新 token过期后,Token 刷新并发处 ...
django数据库版分页实现
说到分页,我头大了一天,但是,最后还是克服了!! 我这里是使用了数据库存储,data(第n页显示数据条,包括前面的页码),page(页码) 每次点击分页按钮,发送一次请求,数据库的data.page都 ...
用vue封装分页器，让你的页面简单而不失优雅
前言当我们在开发 web 应用时,经常需要对大量数据进行分页展示,这时候用到的就是分页器.element 是一款流行的前端 ui 框架,它提供了许多有用的工具和组件,其中就包括分页器组件.在本文中, ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
轮播图Swiper小白点（分页器）与图片不同步即失效问题Vue
一.现象在使用Swiper轮播图时,图片正常轮播,但是分页器也就是下方显示页码小白点的却跟当前图片的顺序不相对应二.分析主要是因为在建立swiper对象时,未在数据请求结束后初始化swiper对 ...
Vue 项目中 Swiper(5) 轮播图分页器 swiper-pagination 无法显示问题（解决方案集合）
最近用Vue做项目需要加个轮播效果,安装swiper后,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的,默认安装的是最新版本swiper@6.4.5,这可把我难住了. < ...
关于Vue框架Element UI中分页器，当前页的问题
页面跳转后,再返回本页面依然是之前跳转时的pageNum. ---当分页超过2页时,在大于等于第二页中进行跳转,跳转到其他页面后返回,依然是跳转时的页面. 这里面涉及到的参数传递自然是用router中 ...
vue如何使用elementui分页器，前端分页器
这里是展示的表格,将后端的数据以表格的形式展示出来 <el-table:data="tableDatas"style="width: 500px"> ...

Vue —— 分页器

全局组件：分页器 Pagination

main.js 中引入并注册全局组件分页器

父组件 Search 给子组件 Pagination 传分页数据

Vue —— 分页器相关推荐

最新文章

热门文章

Vue —— 分页器

全局组件：分页器 Pagination

main.js 中引入并注册 全局组件分页器

父组件 Search 给 子组件 Pagination 传分页数据

Vue —— 分页器相关推荐

最新文章

热门文章

main.js 中引入并注册全局组件分页器

父组件 Search 给子组件 Pagination 传分页数据