zoukankan      html  css  js  c++  java
  • [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)  //点击第几页
    			}
    

      

  • 相关阅读:
    存储与服务器的连接方式对比(DAS,NAS,SAN)
    FreeNAS系统总结
    FreeNAS-9.10虚拟机测试安装
    rsync实时同步服务部署
    无限循环与嵌套循环
    几种循环语句
    选择结构if
    java引用数据类型
    java运算符的优先级
    java运算符-逻辑、三元运算符
  • 原文地址:https://www.cnblogs.com/MasterMonkInTemple/p/12713112.html
Copyright © 2011-2022 走看看