分頁

• 分頁、查詢、重置、修改、刪除

分頁、查詢、重置、修改、刪除

vue中的分頁使用頻繁，在此記錄一下。因為分頁一般和增刪查改等一起使用，所以寫了一套。若是沒有使用到其他功能，可以直接刪除，只使用分頁功能。

pagination: {total: 0,current: 1,pageSize: 10, //每頁中顯示10條數據pageSizeOptions: ["10", "20", "30"], // 每頁中顯示的數據showTotal: (total) => `共有${total}條數據`, //分頁中顯示總的數據showSizeChanger: true, // 顯示頁面條數改變showQuickJumper: true, // 顯示快速跳轉},queryParam: {//查詢參數page: 1, //第幾頁size: 10, //每頁中顯示數據的條數hosName: "",hosCode: "",province: "",city: "",}, // ---------- 分頁函數 -------------handleTableChange(pagination) {this.pagination.current = pagination.current;this.pagination.pageSize = pagination.pageSize;this.queryParam.page = pagination.current;this.queryParam.size = pagination.pageSize;this.Search();}, // 1. 獲取列表函數,該函數的作用是獲取頁面上顯示的表格// 獲取列表設置默認參數:分頁為 1 的參數getList(queryPath = "?pageNo=1") {this.dataSource = []; // 重置 table 的 dataSource 數據BZGLHttp.getFangfa(queryPath).then((res) => {// console.log("res列表:::", res);// 設置分頁const pagination = { ...this.pagination };pagination.total = res.result.total;pagination.pageSize = res.result.size;this.pagination = pagination;// 渲染數據,把接收的數據渲染到table中for (let i = 0; i < res.result.records.length; i++) {let data = {key: (res.result.current - 1) * res.result.size + i + 1,day: res.result.records[i].day,id: res.result.records[i].id,remark: res.result.records[i].remark,storageQuantity: res.result.records[i].storageQuantity,transferOutQuantity: res.result.records[i].transferOutQuantity,lossQuantity: res.result.records[i].lossQuantity,lossRate: res.result.records[i].lossRate,source: res.result.records[i].source,source_dictText: res.result.records[i].source_dictText,grade: res.result.records[i].grade,grade_dictText: res.result.records[i].grade_dictText,operation: res.result.records[i].operation,operation_dictText: res.result.records[i].operation_dictText,otherTrainerId: res.result.records[i].otherTrainerId,otherTrainerId_dictText:res.result.records[i].otherTrainerId_dictText,};this.dataSource.push(data);}});},// 2. 獲取查詢條件 函數,該函數會返回當前的查詢條件， 搜索欄查詢條件 + 分頁的頁碼getQueryPath() {let queryPath ="?pageNo=" +this.queryParam.page +"&day=" +this.startTime +"&day=" +this.endTime +"&operation=" +this.form.operation;return queryPath; // 返回的查詢條件},// 3. 重置當前頁碼及頁碼參數resetPagination() {this.pagination = {total: 0,current: 1,pageSize: 10, //每頁中顯示10條數據showSizeChanger: true,pageSizeOptions: ["10"], //每頁中顯示的數據showTotal: (total) => `共有${total}條數據`, //分頁中顯示總的數據};//查詢參數this.queryParam = {page: 1, //第幾頁size: 10, //每頁中顯示數據的條數hosName: "",hosCode: "",province: "",city: "",};},// 4、查詢按鈕觸發函數——單獨寫，目的是在頁碼不為1時，點擊查詢，頁碼自動歸1getsearch1() {this.resetPagination(); //重置頁碼和參數//重置按鈕觸發函數// this.resetForm();// 獲取目前選擇好的查詢條件let queryPath = this.getQueryPath();this.getList(queryPath);// this.resetPagination(); // 查詢完后 需要重置頁碼和參數},// 5. 供分頁調用的查詢函數Search() {// 獲取目前選擇好的查詢條件let queryPath = this.getQueryPath();// console.log("當前的查詢路徑為:::",queryPath);this.getList(queryPath);//this.resetPagination(); // 查詢完后 需要重置頁碼和參數},// 6. 重置按鈕觸發函數resetForm() {// 重置查詢表單,動態刷新列表this.form = {day: null, //日期operation: "", //操作單選按鈕};this.resetPagination(); //需要重置頁碼和參數// 重新調用獲取列表函數，默認參數獲取列表this.getList();}, // 7. 修改提交handleOk() {// console.log("要更新的數據::::::", this.updateForm);BZGLHttp.updateJianGenPaiShiInfo(this.updateForm).then((res) => {console.log(res);if (res.code == 200) {this.$message.success("修改成功");}});// 獲取當前的查詢路徑重新進行查詢，刷新列表let queryPath = this.getQueryPath();this.getList(queryPath);this.updatevisible = false;},// 8. 刪除按鈕 workdelete(Id) {// console.log("要刪除的該記錄的id:::",Id);BZGLHttp.deleteJianGenPaiShiInfo("?id=" + Id).then((res) => {if (res.code == 200) {this.$message.success("刪除成功");this.dataSource = [];let queryPath = this.getQueryPath();this.getList(queryPath);}});},

總結

以上是生活随笔為你收集整理的vue分页功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。