包含了搜索和分页和筛选
/**
* @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