Quasar的自定义分页组件

描述：

由于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，从第一页开始请求。用于外部条件筛选用。