Vue + Element-ui 实现表格本地分页

最新推荐文章于 2024-05-07 07:23:20 发布
最新推荐文章于 2024-05-07 07:23:20 发布
阅读量1.3k 收藏 8
点赞数 4
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42547971/article/details/112921030
版权
在开发过程中，有一些数据需要在前端本地实现分页效果，效果如图分页使用的是element-ui的<el-pagination></el-pagination>组件现在就来具体实现一下：template组件<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentP
摘要由CSDN通过智能技术生成

在开发过程中，有一些数据需要在前端本地实现分页效果，效果如图
在这里插入图片描述
分页使用的是element-ui的<el-pagination></el-pagination>组件
现在就来具体实现一下：

template组件

<el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="prev, pager, next"
    :total="tableCopyTableList.length"
最低0.47元/天 解锁文章
萌小窝
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
el-table本地分页
weixin_42356155的博客
09-10 675
<template> <div> <h3>前端分页</h3> <div class="table"> <el-table :data="nowPageList" width="100%" :height="400" > <el-table-column v-for="(info,index) in h
element 获取总页数本地分页
qq_28586135的博客
09-28 1525
第一种分页是请求后台时，把参数带过去 第二种分页就是请求总数自己分页 第一种方法 第二种方法 <template> <el-table class="markerDataTable" :data="currentPageData"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> &lt
2024年最全el-table 分页全选功能讲解_el-table全选，前端中高级面试题
最新发布
2401_84437530的博客
05-07 356
在 el-table 中，通过 @selection-change=“handleRowSelection” 和 :row-key=“getRowKeys”，在第一行，也就是多选框的那一列上，加上 :reserve-selection=“true”, 直接上代码，仅供大家参考。它和其它框架（jquery）的区别是什么？描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？Vue 的 nextTick 的原理是什么？组件中写 name 选项有什么作用？Vue 中 key 值的作用？
Element + Vue 实现表格本地分页（涉及标签 'el-pagination' 和 Vue的 mixins混入属性）
窝窝头的博客
12-11 1097
一、版本说明 "element-ui": "^2.5.4", "vue": "^2.5.2", "vue-router": "^3.0.7" 二、封装 mixins 需要的文件，即分页中需要的属性 和 方法 2.1、 src目录下，新建文件夹 mixins，此目录下新建文件 initPagin.js文件（目录名、文件名自定义） 目录如下： initPag...
elementUI实现前端分页
weixin_34233856的博客
05-15 147
　　按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 &lt;el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%"&gt; 　　最主要就是上面标红这一块的处理： 　　AllCommodityList是...
Element ui 数据分页
WeiflR10的博客
09-11 311
<el-pagination @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="5" //每页显示5条数据 layout="total, prev, pager, next, jumper" :total="tatale...
基于tp5的vue+element-ui 实现分页
04-10
在本项目中，我们主要探讨如何使用`ThinkPHP5 (TP5)`框架，结合前端的`Vue.js`和`Element UI`组件库来实现数据的分页显示。`ThinkPHP5`是一个流行的PHP开发框架，它提供了丰富的MVC功能，方便开发者快速构建Web应用...
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
Vue+element-ui 实现表格的分页功能示例
10-18
主要介绍了Vue+element-ui 实现表格的分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+Element-ui实现分页效果
01-21
本文实例为大家分享了vue+Element-ui实现分页效果的具体代码，供大家参考，具体内容如下 当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这...
Vue+ElementUI table表格分页
a5252145的博客
07-31 7869
Vue+ElementUI table表格分页 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分...
vuejs实现本地数据的筛选分页功能思路详解
10-19
今天做项目需要一份根据本地数据的筛选分页功能，下面小编把vuejs实现本地数据的筛选分页功能的实现思路分享到脚本之家平台，需要的朋友可以参考下
vue项目中表格数据本地分页
chengzi_jiaotang的博客
10-13 542
项目中某些情况我们需要将所有数据从服务器上请求下来，在本地做处理，此时就需要我们在本地数据分页。 本地分页其实很简单，如图： <el-table class="tabl" :data="dataList.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" border ref="Table" align="center"> </el-table> 其中 dataList是我们从服务器请求回来...
vue+ element table表格增加前端本地分页功能
蓝胖子的博客
10-20 259
效果图 data中定义: 代码: <el-table ref="myTable" v-loading="crud.loading" :row-key="getRowKey" :header-cell-style="{ color: '#FFF', background: '#333' }" :cell-style="{ color: '#FFF', background: '#333' }" :d
Vue+Element表格本地分页过滤
yycdaizi的专栏
10-18 1849
关键点 过滤：全量数据单独保存，增加计算属性根据过滤条件计算过滤后的表格数据tableData。 分页：增加一个计算属性pageData，根据当前页号currentPage和每页大小pageSize从表格数组里过滤出当前页的数据。分页条的总行数设为过滤后的数据的条数。 代码 <template> <section > <el-form :inline="tru...
element表格动态列、本地分页、动态form、自定义校验集成
热门推荐
q1424966670的博客
08-16 1万+
第一版。排序目前还没做，不支持自定义排序 <template> <div> <div id="box"> <el-table :data="tableData.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize)" ref="table" style="width: 100%" border height="400"> ..
基于el-table和el-pagination实现数据的分页效果
weixin_42966151的博客
11-25 2065
基于el-table和el-pagination实现数据的分页效果,细致解说
使用vue+Element实现分页功能
weixin_53068161的博客
07-18 3678
使用vue+Element实现分页功能前言一、案例代码展示及效果二、分页功能模块解释1.引入分页组件2.结合slice()和PageSize 、currentPage 参数对遍历数据实现分页 前言 提示：在数据处理和展示时，我们常常对需要数据进行分页展示，故本文主要介绍基于vue3和element-plus实现的分页功能 提示：以下是本篇文章正文内容，下面案例可供参考 一、案例代码展示及效果 主要代码： <template> <div class="body"> <di
Vue2.0 + Element-ui2实现分页
05-14
要使用Vue2.0和Element-ui2实现分页，你可以按照以下步骤进行操作： 1.安装Element-ui ``` npm i element-ui -S ``` 2.在main.js中引入Element-ui ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3.在需要使用分页的组件中引入el-pagination组件，并设置相关参数 ``` <template> <div> <el-pagination :total="total" //总条数 :page-size="pageSize" //每页显示条数 :current-page.sync="currentPage" //当前页数 layout="total, sizes, prev, pager, next, jumper" //分页布局 :page-sizes="[10, 20, 30, 50]" //每页显示条数选项 @size-change="handleSizeChange" //页数改变时触发 @current-change="handleCurrentChange" //每页显示条数改变时触发 > </el-pagination> </div> </template> <script> export default { data() { return { total: 100, //总条数 pageSize: 10, //每页显示条数 currentPage: 1 //当前页数 } }, methods: { //页数改变时触发 handleSizeChange(val) { console.log(`每页 ${val} 条`); }, //当前页数改变时触发 handleCurrentChange(val) { console.log(`当前页: ${val}`); } } } </script> ``` 以上就是Vue2.0 + Element-ui2实现分页的基本步骤。你可以根据实际需求进行参数的调整和样式的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值