const blankPage = {
data() {
return {
// 筛选参数，此处只是预留，需要在自己的业务页面进行处理
filterParams: {},
// 分页参数
pageParams: {
pageSizes: [10, 30, 50, 100],
pageSize: 10,
pageNum: 1,
total: 0
},
// 排序参数
sortParams: {
sort: "",
order: ""
},
// 其他业务参数，此处只是预留，需要在自己的业务页面进行处理
otherParams: {},
table: {
header: [],
data: [],
loading: false
}
};
},
methods: {
// 重置参数
resetParams() {
this.initPageParams();
this.getTableListData();
},
// 获取请求参数
groupParams(dataArr = ["filterParams", "pageParams", "sortParams", "otherParams"]) {
let params = {};
dataArr.forEach((key) => {
if (this[key].pageSizes) {
// 分页参数
Object.assign(params, {
pageConfig: {
pageSize: this[key].pageSize,
pageNum: this[key].pageNum,
}
});
} else {
Object.assign(params, this[key]);
}
});

  return params;
},
// 初始化页面
initPageData() {
  this.initPageParams();
},
// 初始化页面参数
initPageParams(dataArr = ["filterParams", "pageParams", "sortParams"]) {
  dataArr.forEach(dataKey => {
    if (dataKey === "pageParams") {
      this["pageParams"].pageNum = 1;
    } else {
      Object.keys(this[dataKey]).forEach(key => {
        this[dataKey][key] = "";
      });
    }
  });
},
// 每页条数改变事件
handleSizeChange(size, pageConstant = ‘pageParams‘, getFn = ‘getTableListData‘) {
  this[pageConstant].pageNum = 1;
  this[pageConstant].pageSize = size;
  // 获取数据
  this[getFn]();
},
// 当前页改变事件
handleCurrentPageChange(page, pageConstant = ‘pageParams‘, getFn = ‘getTableListData‘) {
  this[pageConstant].pageNum = page;
  // 获取数据
  this[getFn]();
},
// 排序改变事件
sortChange({column, prop, order}) {
  // order=descending 降序 DESC
  // order=ascending 升序 DESC
  if (order) {
    this.sortParams.sort = prop;
    this.sortParams.order = order === "descending" ? "DESC" : "ASC";
  } else {
    this.sortParams.sort = "";
    this.sortParams.order = "";
  }
  this.getTableListData();
},
// 获取列表数据，此处只是预留，需要在自己的业务页面进行处理
getTableListData() {
  console.log("请求参数:", this.groupParams());
  console.log("请在业务页面自行编写业务逻辑");
}

}
};

export {
blankPage,
};

调用的时候 如下
import { blankPage } from "@/components/common/mixins";
export default {
mixins: [blankPage],
}

分页参数调用
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="handleCurrentPageChange"
:page-sizes="[10, 20, 30, 50]"
layout="total, sizes, prev, pager, next, jumper"
:total="pageParams.total"
>

mixin table 表格封装查询 重置 分页