描述：
由于quasar自身封装的分页组件，满足不了业务需求（业务数据的请求是根据limit和offset来进行分页，而不是按照page和limit）。因而重新对分页组件进行了简单封装，保证了切换页码、切换每页显示数量以及强制改变状态来触发事件，用于进行数据请求。
分页组件
遇坑描述：
遇到太多，描述太难。总之就是
-
联动状态变更导致多次触发事件，从而引起多次请求。
-
分页组件外，更改筛选条件，自动进行触发事件，从而引起的请求。（目标本来是输入完内容，按回车键进行数据请求）
问题1源于最初页码的改变状态进行监听。
最初因为页总数count为0，当进行第一次数据请求的时候，count会进行改变，从而连带着page同时也进行了改变，此时会出发事件（回调事件进行了数据请求），因此导致了又请求了一次。
此外，如果页码为1，当改变了每页显示数量，页码未变动，导致无数据请求。如果对每页显示数量进行监听，并反馈事件，此时如果页码不为1，每页显示的数量变动又会触发页码的改变，从而导致了多次数据请求。
问题2主要是因为将触发事件的方法写在了页码page的get方法中（为什么input的v-model能影响分页组件中page的get方法还不是很明白）
通过与qfchen导师的沟通，以及思路的理清，最终将页面显示数量limit和偏移量offset以及强制触发字段emitEvent等三者进行watch监听，达到了最终效果。（可能还有更完美的方案）
直接贴上代码
<!--
by nickctang
自定义分页组件
传入参数： count、emitEvent(切换该字段，用于控制，让!emitEvent即可)
触发事件：pageChange(limit, offset)
limit是每页显示数量，offset是偏移量
-->
<template>
<div class="row q-my-md fs-14" >
<span class="self-center col-auto q-pb-sm q-mt-md q-mr-md">共{{count}}条，第{{ page }} /{{max}}页</span>
<q-select
class="col-auto self-center q-mr-md q-mt-md"
style="width: 90px"
v-model="perPageNum"
:options="perPageNumOptions"
/>
<q-pagination class="col q-mt-md" v-model="page" :max="max" size="sm" boundary-links boundary-numbers :max-pages="10" direction-links ellipses />
</div>
</template>
<script>
export default {
name: 'CPagination',
data () {
return {
pagination: {
offset: 0,
limit: 10
},
perPageNumOptions: [
{
label: '每页10条',
value: 10
},
{
label: '每页20条',
value: 20
},
{
label: '每页50条',
value: 50
},
{
label: '每页100条',
value: 100
}
],
pageChangeFlag: false
}
},
watch: {
// 每页显示数量改变即触发事件
'pagination.limit': function () {
if (!this.pageChangeFlag) {
this.$emit('pageChange', this.pagination.limit, this.pagination.offset)
} else {
this.pageChangeFlag = false
}
},
// 偏移量改变即触发事件
'pagination.offset': function () {
this.$emit('pageChange', this.pagination.limit, this.pagination.offset)
},
// 改变emitEvent强制触发事件
'emitEvent': function () {
if (this.pagination.offset === 0) {
this.$emit('pageChange', this.pagination.limit, this.pagination.offset)
} else {
this.pagination.offset = 0
}
}
},
created () {
// 默认首次就触发事件
this.$emit('pageChange', this.pagination.limit, this.pagination.offset)
},
computed: {
page: {
get: function () {
if (this.count === 0) {
return 0
}
// 偏移量/每页显示数量 向下取整 + 1
return Math.floor(this.pagination.offset / this.pagination.limit) + 1
},
set: function (val) {
// 页码改变动态的更新偏移量
this.pagination.offset = (val - 1) * this.perPageNum
}
},
perPageNum: {
get: function () {
return this.pagination.limit
},
set: function (val) {
if (val !== this.perPageNum) {
this.pagination.limit = val
// 进行每页显示数量切换时，判断当前偏移量是否大于改变后的偏移量，如果是，则不触发limit改变的事件，因为偏移量的改变也会触发
if (this.pagination.offset > (Math.floor(this.pagination.offset / val)) * val) {
this.pageChangeFlag = true
}
}
}
},
max: function () {
// 最大页数，总数/每页显示数量，向上取整
return Math.ceil(this.count / this.perPageNum)
}
},
props: {
count: {
required: true
},
emitEvent: {
required: true,
default: false
}
}
}
</script>
达到的效果：
-
切换页码，触发pageChange事件，传出每页显示数量limit和偏移量offset。
-
切换每页显示数量，触发pageChange事件。（切换每页数量时，保证偏移量不变，并没有让从第一页重新开始）
-
更改强制触发状态，触发pageChange事件。让偏移量置为0，从第一页开始请求。用于外部条件筛选用。
网友评论