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"
>