【vue】element 分页封装.js

包含了搜索和分页和筛选

/**
 * @type {import('vue').ComponentOptions<import('vue').default>}
 */
const paginationMixin = {
  data() {
    return {
      pagination: {
        limit: 10,
        current: 1,
        total: 0
      }
    }
  },
  methods: {
    /**
     * @param {number} [current]
     */
    async search(current) {
      if (current !== undefined) {
        const params = {
          pagesize: this.pagination.limit,
          pagenum: this.pagination.current
        }

        this._fetchData(params)
        return
      }

      if (this.pagination.current === 1) {
        this.search(1)
        return
      }

      this.pagination.current = 1
    }
  },
  watch: {
    'pagination.current'(val) {
      this.search(val)
    },
    'pagination.limit'(val) {
      console.log(Math.ceil(this.pagination.total / val), this.pagination.current)
      /**
       * 当前总数 / 新分页条数 = 修改后最大页码
       * 如果小于 当前页码
       * 说明 当前页码需要更新为 修改后最大页码
       * 取消获取数据请求
       * 页码更新
       */
      if (Math.ceil(this.pagination.total / val) < this.pagination.current) return
      this.search(this.pagination.current)
    }
  }
}

/**
 * @param {[string, string][]} options 分页字段 和 获取数据字段
 * @returns {import('vue').ComponentOptions<import('vue').default>}
 */
export function paginationsMixin(options) {
  /**
   * @type {Record<string, (current?: number) => void>}
   */
  const methods = {}
  /**
   * @type {Record<string, Pagination>}
   */
  const pagination = {}
  /**
   * @type {Record<string, import('vue').WatchHandler<number>>}
   */
  const watch = {}

  options.forEach(([paginationKey, dataMethodKey]) => {
    const PAGINATION_KEY = 'pagination' + paginationKey
    const SEARCH_KEY = 'search' + dataMethodKey

    pagination[PAGINATION_KEY] = {
      limit: 10,
      current: 1
    }

    methods[SEARCH_KEY] = function (current) {
      if (current !== undefined) {
        const params = {
          pagesize: this[PAGINATION_KEY].limit,
          pagenum: this[PAGINATION_KEY].current
        }

        this[dataMethodKey](params)
        return
      }

      if (this[PAGINATION_KEY].current === 1) {
        this[SEARCH_KEY](1)
        return
      }

      this[PAGINATION_KEY].current = 1
    }

    watch[PAGINATION_KEY + '.current'] = function (val) {
      this[SEARCH_KEY](val)
    }

    watch[PAGINATION_KEY + '.limit'] = function (val) {
      this[SEARCH_KEY](this[PAGINATION_KEY].current)
    }
  })

  return {
    data() {
      return pagination
    },
    methods,
    watch
  }
}

export default paginationMixin