[Vue+Element UI]不知道總頁碼數時如何實現翻頁


<el-table></el-table>的下面加上分頁控件,注意,是下面,或者叫外面,不是里面

<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pageSize"
			layout="sizes, prev, pager, next, jumper"
			:total="totalDataSize">
		</el-pagination>

<script><script>里面加入

data() {
			return {
				input: "", // 搜索輸入框數據
				jobDefinitionList: [], // 存放列表數據
				selectedRows: [],  //存放勾選的列表數據
				jobDefinitionParameters: "",
				automationType: "",
				show: false,
				sortBy:"job_definition_name", //排序關鍵字
				sortOrder:"ASC",  //排序,升序還是降序
				currentPage:1, //初始頁
				previousPage:0, //上一次的頁面
				pageSize:10,    //每頁的數據
				totalDataSize:10,    //總數據條數
				estimateAddDataSize:10,    //為了預估數據總數,猜測增加數據條數
				loading: true
			};
		},

獲取數據的函數:

methods: {
			listAllJobDefinition() {
				// 由於已經導入了 Vue-resource這個包,所以 ,可以直接通過  this.$http 來發起數據請求
				this.$http
				.get("jobDefinitions",{
					params: {
						sortBy: this.sortBy,
						sortOrder: this.sortOrder,
						pageSize: this.pageSize,
						pageNo: this.currentPage,
						jobDefinitionName: this.input
					}
				})
				.then(result => {
					// 注意: 通過 $http 獲取到的數據,都在 result.body 中放着
					var result = result.body;
					// console.log("Code : "+result.code);
					if (result.code === 0) {
						// 成功了
						this.loading = false;
						this.jobDefinitionList = result.data;
						
						//為了分頁功能,預估總數據條數
						//如果當前頁的數據不滿每頁最大數據條數,就表示不能再繼續翻頁了
						if(this.jobDefinitionList.length < this.pageSize){
							this.estimateAddDataSize = 0;
						}
						//如果當前頁的數據大於或者等於最大數據條數,且當前頁的頁碼比上一頁大,表示還可以繼續翻頁
						if(this.jobDefinitionList.length >= this.pageSize && this.currentPage > this.previousPage){
							this.totalDataSize += this.estimateAddDataSize;
						}
						this.previousPage = this.currentPage;
						
						for (var i in this.jobDefinitionList) {
							this.automationType = this.jobDefinitionList[i]["automationType"];
							this.automationType = DataMapping.automationType[this.automationType];
							this.jobDefinitionList[i]["automationType"] = this.automationType;
							
							this.jobDefinitionParameters = JSON.stringify(this.jobDefinitionList[i]["jobDefinitionParameters"]);
							this.jobDefinitionList[i]["jobDefinitionParameters"] = this.jobDefinitionParameters;
						}
					} else {
						// 失敗了
						this.$message({
							message: result.message,
							type: 'warning'
						})
					}
				}).catch((e) => {console.log(e)});
			},

  添加翻頁事件的處理

// 初始頁currentPage、初始每頁數據數pageSize和數據data
			handleSizeChange: function (size) {
				this.pageSize = size;
				this.currentPage = 1;
				this.totalDataSize = 2*(this.pageSize);
				this.estimateAddDataSize = this.pageSize;
				this.listAllJobDefinition();
				// console.log(this.pageSize)  //每頁下拉顯示數據
			},
			handleCurrentChange: function(currentPage){
				this.currentPage = currentPage;
				this.listAllJobDefinition();
				// console.log(this.currentPage)  //點擊第幾頁
			}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM