分页器展示,需要哪些条件(数据)
1、当前是第几页:pageNo
2、每一页需要展示多少条数据:pageSize
3、整个分页器全部数据数量:total
4、分页器连续页码个数:continues一般奇数:5|7,(美观对称)
分页器子组件封装
<template>
<div class="pagination">
<!-- 上 -->
//当前页第一页不能点击 :disabled="pageNo == 1"
//绑定一个点击事件 子传父$emit 事件为getPageNo
<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
上一页
</button>
<button
v-if="startNumAndEndNum.start > 1"
// 绑定一个点击事件 子传父$emit 事件为getPageNo
@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"
//绑定一个点击事件 子传父$emit 事件为getPageNo
@click="$emit('getPageNo', page)"
:class="{ active: pageNo == page }"
>
{{ page }}
</button>
<!-- 下 -->
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button
v-if="startNumAndEndNum.end < totalPage"
//绑定一个点击事件 子传父$emit 事件为getPageNo
@click="$emit('getPageNo', totalPage)"
:class="{ active: pageNo == totalPage }"
>
{{ totalPage }}
</button>
<button
//当前页最后一页不能点击 :disabled="pageNo == totalPage"
:disabled="pageNo == totalPage"
//绑定一个点击事件 子传父$emit 事件为getPageNo
@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);
},
//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
startNumAndEndNum() {
const { continues, pageNo, totalPage } = this;
//先定义两个变量存储起始数字与结束数字
let start = 0,
end = 0;
//连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】
//不正常现象【总页数没有连续页码多】
if (continues > totalPage) {
start = 1;
end = totalPage;
} else {
//正常现象【连续页码5,但是你的总页数一定是大于5的】
//起始数字
start = pageNo - parseInt(continues / 2);
//结束数字
end = pageNo + parseInt(continues / 2);
//把出现不正常的现象【start数字出现0|负数】纠正
if (start < 1) {
start = 1;
end = continues;
}
//把出现不正常的现象[end数字大于总页码]纠正
if (end > totalPage) {
end = totalPage;
start = totalPage - continues + 1;
}
}
return { start, end };
},
},
};
</script>
仓库
import { reqGetSearchInfo } from "@/api";
//search模块的仓库
const state = {
//仓库初始状态
searchList: {},
};
const mutations = {
GETSEARCHLIST(state, searchList) {
state.searchList = searchList;
},
};
const actions = {
//获取search模块数据
//params形参:是当用户派发action的时候,第二个参数传递过来的,至少是一个空对象
async getSearchList({ commit }, tmd = {}) {
//当前这个reqGetSearchInfo这个函数在调用获取服务器数据的时候,至少传递一个参数(空对象)
let result = await reqGetSearchInfo(tmd);
if (result.code == 200) {
commit("GETSEARCHLIST", result.data);
}
},
};
const getters = {
//当前state是search中的state 不是大仓库中的state(不包含home中的state)
goodsList(state) {
//state.searchList.goodsList如果服务器数据回来了,没问题是一个数组
//假如网络不给力|没有网 state.searchList.goodsList应该返回的是undefined
//计算新的属性的属性值至少给人家来一个数组 没有数据遍历 至少给个空数组遍历
return state.searchList.goodsList || [];
},
trademarkList(state) {
return state.searchList.trademarkList || [];
},
attrsList(state) {
return state.searchList.attrsList || [];
},
};
export default {
state,
mutations,
actions,
getters,
};
export const reqGetSearchInfo = (params) =>
requests({ url: "/list", method: "post", data: params });