[Vue+Element UI]不知道总页码数时如何实现翻页
<el-table></el-table>的下面加上分页控件,注意,是下面,或者叫外面,不是里面
1 2 3 4 5 6 7 8 9 | < 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>里面加入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 }; }, |
获取数据的函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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)}); }, |
添加翻页事件的处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 初始页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) //点击第几页 } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
2019-04-16 [Jenkins Git] 在Jenkins上拉代码总是失败,跑去本地看,提示输入用户名和密码,但是Jenkins上已经配置了正确的用户名和密码
2014-04-16 [Selenium]验证点了某个Button之后无反应