一、封装分页器组件的时候:需要知道哪些条件?
- 分页器组件需要知道我一共展示多少条数据 ----total【100条数据】
- 每一个需要展示几条数据------pageSize【每一页3条数据】
- 需要知道当前在第几页-------pageNo[当前在第几页]
- 需要知道连续页码数【起始数字、结束数字:连续页码数市场当中一般5、7、9】奇数,对称好看 continues
二、实现
在@/components/Pagination/index.vue:
<template>
<div class="pagination">
<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
上一页
</button>
<button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo', 1)">
1
</button>
<button v-if="startNumAndEndNum.start > 2">···</button>
<button
v-for="(page, index) in startNumAndEndNum.end"
:key="index"
@click="$emit('getPageNo', page)"
v-show="page >= startNumAndEndNum.start"
:class="{ active: pageNo == page }"
>
{{ page }}
</button>
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button
v-if="startNumAndEndNum.end < totalPage"
@click="$emit('getPageNo', totalPage)"
>
{{ 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); //向上取整
},
// 计算出连续的页码的起始数字与结束数字【连续页码的数字:至少是5】
startNumAndEndNum() {
const { continues, pageNo, totalPage } = this;
// 起始数字、结束数字
let start = 0;
let end = 0;
// 连续页码数字为5,不正常现象————totalPage不够5页
if (continues > totalPage) {
start = 1;
end = totalPage;
} else {
// 正常现象
start = pageNo - parseInt(continues / 2);
end = pageNo + parseInt(continues / 2);
// 【start出现0或负数】
if (start < 1) {
start = 1;
end = continues;
}
// 【end大于totalPage】
if (end > totalPage) {
end = totalPage;
start = totalPage - continues + 1;
}
}
return { start, end };
},
},
};
</script>
三、在入口文件main.js中注册
import Pagination from '@/components/Pagination'
// 第一个参数:全局组件的名字;第二个参数:哪一个组件
Vue.component(Pagination.name, Pagination)
四、在组件中引用
<!-- 分页 -->
<Pagination
:pageNo="searchParams.pageNo"
:pageSize="searchParams.pageSize"
:total="total"
:continues="5"
@getPageNo="getPageNo"
/>
面试问题:v-for与v-if优先级?
- v-for优先于v-if被解析。
- 如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能。
- 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环。
- 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项
解析来源:https://blog.csdn.net/qq_36782473/article/details/109188880