ElementUI实现表格列表分页效果教程

小鱼儿 2021-09-08 03:24 643阅读 0赞

ElementUI实现表格列表分页效果教程

> Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型

`<el-pagination>`加上`@size-change="handleSizeChange、@current-change="handleCurrentChange"`处理当前页和当前页数的改变事件

<div class="formTable" id="formTable">
    <el-table ref="Table" :data="apprItemData" :header-cell-style="headClass" row-key="approveItem" :tree-props="{children: 'children'}" height="420" border>
    	<el-table-column type="selection" width="55">
    	</el-table-column>
    	<el-table-column label="序号" width="60" align="center">
    		<template slot-scope="scope">{
       {scope.$index+1}}</template>
    	</el-table-column>
    	<el-table-column prop="itemCode" label="编码">
    	</el-table-column>
    	<el-table-column prop="approveName" label="事项名称">
    	</el-table-column>
    </el-table>
    </div>
    
    <div class="pagination">
    	<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5,10, 15, 20, 25]" :page-size="pageSize" :current-page.sync="currentPage" layout="total, sizes, prev, pager, next, jumper" :total="totalRow">
    	</el-pagination>
    </div>

<script type="text/babel">
     var vm = new Vue({ 
         el: '#app',
         data:{ 
             apprItemData : [],
             currentPage: 1,  //当前页
             totalRow: 0, //总页数
             pageSize: 10 //当前显示条数
         },
         computed: { },
         watch: { },
         created() { },
         mounted() { 
             this.loadItemData();
    },
         methods: { 
             // 加载信息
    loadItemData () { 
                 var pageSize = this.pageSize;
                 var currentPage = this.currentPage;
                 console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
     //debugger;
     var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
                 $.ajax({ 
                     type: 'get',
                     url:geturl,
                     contentType: "application/json; charset=utf-8",
                     success: function(data) { 
                         //debugger;
                         console.log("totalRow:"+data.total);
                         vm.apprItemData = data.rows;
                         vm.totalRow = Number(data.total);
                     },
                     error: function(e) { 
                         console.log("加载数据出现错误：",e);
                     }
                 })
             }
             // 表头样式设置
             headClass() { 
                 return 'text-align: center;background:#F7F7F7;color:#1C1C1D;'
             },
             //页数变换
             handleSizeChange(val) { 
                 this.pageSize = val;
                 this.loadItemData();
             },
             //当前页变换
             handleCurrentChange(val) { 
                 this.currentPage = val;
                 this.loadItemData();
             }
         }
     });
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210813/750e4194a8214378aaa4883c5634e674.png

发表评论取消回复

表情：

评论列表（有 0 条评论，643人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI实现分页

分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，

左手的ㄟ右手/ 2023年01月13日 06:22/ 0 赞/ 241 阅读

相关 ElementUI 分页

一、概述当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。本次所使用

谁借莪１个温暖的怀抱￠/ 2023年01月11日 13:03/ 0 赞/ 228 阅读

相关 springboot + elementui 实现分页功能

目录后端前端后端 // num为当前页 size为每页个数 public Page<codesection> pageA

拼搏现实的明天。/ 2023年01月09日 01:08/ 0 赞/ 203 阅读

相关 elementUI实现分页

分页的两种方式。前端分页，后端分页前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数

我就是我/ 2022年12月11日 09:17/ 0 赞/ 252 阅读

相关 Bootstrap实现表格分页

1.官网下载Bootstrap地址：[https://v3.bootcss.com/getting-started/\download][https_v3.bootcss.co

怼烎@/ 2022年05月20日 09:28/ 0 赞/ 330 阅读

相关 EasyUI实现表格分页

1.官网下载EasyUI地址：[http://www.jeasyui.com/download/list.php][http_www.jeasyui.com_download_

迷南。/ 2022年05月18日 23:14/ 0 赞/ 367 阅读

相关 Vue + ElementUI实现动态获取表格数据并分页

首先，引用必需的js和css文件，这里我已经下载到本地了，你们改成自己的地址就行。  <link rel="stylesheet"

雨点打透心脏的1/2处/ 2022年03月17日 05:56/ 0 赞/ 1274 阅读

相关 elementUI实现前端分页

　　按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((c

╰+攻爆jí腚メ/ 2021年12月23日 16:17/ 0 赞/ 381 阅读

相关 ElementUI实现表格列表分页效果教程

ElementUI实现表格列表分页效果教程 > Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue

小鱼儿/ 2021年09月08日 03:24/ 0 赞/ 644 阅读

相关 Vue - 纯前端（Vue + ElementUI）实现 table 表格分页功能

一. 思路 1. 如何获取当前页数据的第一条和最后一条的数据在总数据中的位置 2. 获取到当前页数据的第一条和最后一条的数据在总数据中的位置，怎么获取到对应的数据 3

柔情只为你懂/ 2021年07月25日 17:36/ 0 赞/ 605 阅读