分頁

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

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

vue中的分頁使用頻繁，在此記錄一下。因?yàn)榉猪撘话愫驮鰟h查改等一起使用，所以寫了一套。若是沒有使用到其他功能，可以直接刪除，只使用分頁功能。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。