Vue +Element UI 前端写假分页，不请求后台数据接口

最新推荐文章于 2023-10-25 14:49:52 发布
原创 最新推荐文章于 2023-10-25 14:49:52 发布 · 3.1k 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

文章目录

前言

提示：前端做假分页，只限于适用的场景和数据或列表展示，不适用操作和编辑，望周知。

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.element分页代码

代码如下（示例）：

<div class="pagination-container">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue.js 组件实现分页效果
03-14
为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。
vue+Element-ui前端实现分页效果
01-18
本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码，供大家参考，具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户，用户看到的可能不是全部的数据，而是其中一部分，用户...
vue前端假分页
最新发布
weixin_45852743的博客
10-25 694
前端假分页是因为有时候后端接口不太方便提供分页功能，而前端需要展示大量数据时，为了提高用户体验，需要将数据分页展示。在这种情况下，前端可以通过自己实现一个假的分页效果来达到分页展示数据的目的。假分页的实现方式是在前端将所有数据加载到页面中，然后通过JavaScript代码实现分页效果，即根据用户的点击或滚动等操作，动态地展示不同页码的数据。这种方式虽然不能真正地减少数据的加载量，但可以提高用户的交互体验，让用户更加方便地查看和操作数据。
element UI 假分页器
你离优秀差多少
12-07 1123
1.:table-data=“tableDataShow” 2.tableDataShow: [], //假分页数据 pagination: { pageSize: 10, pageNum: 1, total: 0 } 3.在接口方法中再调用一下fakePage() 4. fakePage () { //假分页 let size = this.pagination.pageSize let page = this.pagination.pageNum let
ElementUI的table的假分页实现
IT小村
04-15 4582
前言 一般我们的 table 都是会通过真分页来实现数据的展示的，但是有一些情况，我们可能会通过假分页的方式，比如数据量小，为了不增加后端接口的复杂性，前端通过假分页来实现分页。 正文 假分页，其实通过 js 数组的 slice 即可轻松实现，难的是如何响应 ElementUI 中的页码切换、页码大小切换、页面搜索。 通过千方百计的测试，笔者最终选择了一个简单可行的方案，那就是在 table 的 ...
vue前端实现的假分页
m0_61476911的博客
12-13 1435
前端实现假分页
利用vue + element实现表格分页和前端搜索的方法
01-19
前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架，已经帮我们封装好了一系列功能性的组件，...1.前端后台管理会存在很多表格,表格数据过多就需要分页; 2.前端交互每次搜索如果都请求服务器会加大服务器的压力
vue+element ui搭建的DEMO增删改查+分页+导出
02-16
总的来说，这个DEMO涵盖了前端开发中的许多基础知识点，不仅涉及到Vue.js和Element UI的使用，还包括了数据管理、接口模拟、分页和数据导出等实际应用场景。对于想要学习和熟悉这些技术的开发者，这是一个很好的起点...
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
vue仿element实现分页器效果
12-29
1 .起因 今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习. 2.实现难点 分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下: <div class=pagination click=pageClick> <button class=pre>上一页</button> <ul class=pages> <li :c
前端实现伪分页
Mr_Yan的博客
07-14 1917
有时候，做静态页面的时候，需要用到分页，当然绝绝绝大多数的情况下，分页这个事是后台来做的，用户请求时再给数据，至于两者利弊，稍后再讲。 因此，我们在这里称作它为伪分页。 此分页分为四部分，首先是页面布局，为了简洁布局，直接用了BootStrap中的分页，代码如下 实现伪分页
vue 假分页
weixin_45345105的博客
10-28 826
因某原因，后端一次性返回所有数据，无分页字段，只能自己实现假分页。 需要准备俩个数组。一个展示，一个分割 最初获取数据的时候 if(this.tableData.length > 0){ let temp = JSON.stringify(this.tableData) this.pageList = JSON.parse(temp) this.pageList = this.pageList
前端假分页
qq_45505241的博客
04-29 299
this.list.filter((v ,i) => (i < (this.page.pageNo) * this.page.pageSize) && (i >= (this.page.pageNo-1) * this.page.pageSize));
基于vue实现假分页
halo1416的博客
02-10 2396
一、 前言 分页对于前端开发而言，是一个经常遇见也比较简单的功能。常见的处理方式是结合后端接口处理即可。 但偶尔有时候后端接口不太方便提供该功能时，我们可以自己通过前端实现一个假的分页效果！ 二、实现代码 其主要实现和传统的分页（如element提供的分页组件）区别在于对 current-change（页码）改变时的处理 传统分页：在current-change回调时间中，拿到最新的页码，重新请求接口即可 自己实现假分页：在current-change回调时间中，拿到最新的页码，去从所以的列表数据中截取出
前端假分页前端假分页前端假分页
cainiaoyaya的博客
06-02 104
【代码】前端假分页。
elementui分页二次封装以及前端假分页+页面序号
几百块的博客
07-07 571
后端没有返回序号，前端可根据： 当前页面 * 每页展示的条数 - 每页展示的条数 + 当前下标index +1 以展示序号 pageParamsRight: { total: 0, pageNum: 1, pageSize: 9, }, <el-col >{{pageParamsRight.pageNum * 9 - 9 + index + 1}}</el-col> 前端分页 前端是接口返
假分页的前端实现（html+bootstrap+js）
HYeeee的博客
04-28 3745
一、开始 今天弄了一天的分页，总结一下今天的工作。 找了一下真假分页的区别： 所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。 而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。 “真分页”显然是效率更高，面对庞大的数据量也能够从...
Vue真假分页
向阳而生
08-31 1897
功能需求： 一共100条数据，我要分10页显示，每页显示10条 一共100条数据，我要分5页显示，每页显示20条 一共99条数据，我要分5页显示，每页显示20条 思路： 理论上这三个参数，获取任意两个，便可知道第三个，但由于镇假分页的概念，所以在真分页中只能选择：pagenum，和pageSize，不然则是假分页啦，既然都可以...
vue+element UI实现表格数据分页功能
03-30
Vue Element UI提供了el-pagination组件来实现表格数据的分页功能。以下是实现步骤： 1. 在Vue组件中引入el-pagination组件并定义分页属性 ``` <template> <div> <el-table :data="tableData" border> //表格内容 </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { tableData: [], //表格数据 total: 0, //总记录数 pageSize: 10, //每页记录数 currentPage: 1 //当前页码 }; }, methods: { handleSizeChange(val) { this.pageSize = val; this.getData(); }, handleCurrentChange(val) { this.currentPage = val; this.getData(); }, getData() { //获取数据，并更新this.tableData和this.total } } }; </script> ``` 2. 在el-pagination组件中绑定事件和属性 - @size-change：当每页显示条数改变时触发的事件，调用handleSizeChange方法更新pageSize并重新获取数据。 - @current-change：当当前页码改变时触发的事件，调用handleCurrentChange方法更新currentPage并重新获取数据。 - :current-page：当前页码，绑定到currentPage属性。 - :page-sizes：每页显示条数数组，可以自定义，默认为[10, 20, 30, 40]。 - :page-size：每页显示条数，绑定到pageSize属性。 - layout：分页组件布局。其中total表示总记录数，sizes表示每页显示条数选择器，prev表示上一页按钮，pager表示页码按钮，next表示下一页按钮，jumper表示跳转输入框和确定按钮。 - :total：总记录数，绑定到total属性。 3. 在getData方法中获取数据并更新表格数据和总记录数 ``` getData() { //计算分页查询的参数 const start = (this.currentPage - 1) * this.pageSize; const limit = this.pageSize; //发起分页查询请求 axios.get('/api/data', { params: { start, limit } }).then(response => { this.tableData = response.data.rows; //更新表格数据 this.total = response.data.total; //更新总记录数 }); } ``` 以上就是使用Vue Element UI实现表格数据分页功能的步骤。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值