前端案例：基于el-table和el-pagination实现数据的分页效果

最新推荐文章于 2024-04-29 21:35:15 发布
VIP文章 最新推荐文章于 2024-04-29 21:35:15 发布
阅读量2.8k 收藏 40
点赞数 8
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67401746/article/details/123220610
版权

首先使用 el-table(表格) 和 el-pagination(分页) 组件需要npm 下载 Element UI 组件库，下载安装方式参见官网：Element - The world’s most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库[这里是图片001]https://element.eleme.cn/#/zh-CN/component/installation

目录

一、案例效果

二、实现步骤&涉及要点

1. el-table 表格存放数据

2.?el-pagination 设置分页效果

三、完整代码+详细注释

一、案例效果

（14 条数据每页显示 6 条，共 3 页。）

二、实现步骤&涉及要点

1. el-table 表格存放数据

<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
                  style="width: 100%">
          <el-table-column prop="date" label="日期" width="220" align="center
最低0.47元/天 解锁文章
m0_67401746
关注
  • 8
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤
使用el-table实现分页选择
再来一块红烧肉
08-31 9474
使用el-table实现分页选择 element 多选Table分页 iview 分页选择 分页勾选
el-pagination分页
凡尘
03-07 107
el-pagination分页
pagination-table:基于element-ui的插件集成分页
05-16
基于 ElementUI-Table 构建的可分页表格 表格列通过使用配置呈现不同的功能，可支持自定义列、v-html、formatter 等功能，表格具备分页功能，可以通过配置开关该功能。 开始使用 1、使用 webpack 构建。 请确保在使用该组件之前，项目已正确配置 Element-UI 安装插件 npm install pagination-table —S 注册插件 import TablePagination from "pagination-table"; Vue.use(TablePagination); 基本使用 <template> <base-table ref="table" :config="tableConfig" :columns="tableColumns" ></base-table> </template> <scrip
Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页
Yongqiang Chen的博客
01-19 2993
当table的数据量比较大的时候，一个屏幕展示不出全部的数据，这个时候就需要分页显示。而多数情况下都是做的后端分页，就是将分页参数和查询条件一并传到后端，后端将当前页要显示的数据返回来。但是有时候会遇到后端也是去调用了其它系统的接口，这时候返回到前端的是所有的数据，此时需要前端自行去进行分页显示。// 页面初始化时生成100条数据，模拟从后端获取所有数据。// 分页方法(用于表格数据后端不分页，放到前端做分页)--===分页=====-->// 从后端获取到的所有表格数据。/** 切换分页 */
Element-plus el-pagination分页居【左，中，右】
x2826436174的博客
03-18 9502
以前我是使用 align="right" 但是饿了么更新版本后将这个方法弃用了 但提供了新的方法 这个箭头符放在哪的前面，那后面的元素就会靠右 想要所有元素靠右的话，就将它放在最前面 ...
el-table前端分页和后端分页的实现
xjh01的博客
09-28 6012
【原文链接】 elementUI实现分页 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据 前端分页 tableData.slice((currentPage-1)*PageSize,curren
ElementUI 分页(el-pagination)
热门推荐
weixin_48215380的博客
01-09 2万+
Element 实现分页功能()超级简单
el-table 分页
huobaotianwang的博客
07-30 2444
<el-table :data=" taskData.slice( (queryInfo.pagenum - 1) * queryInfo.pagesize, queryInfo.pagenum * queryInfo.pagesize ) " border height="48vh" size="mini" :hea.
Vue中使用element的el-table进行分页
辉哥
02-15 2032
element el-table中使用分页并且显示序号，删除完一页数据后自动显示前一页数据。
el-table实现分页
LJJONESEED的博客
05-26 749
【代码】el-table实现分页。
el-search-table-pagination::dog_face:将Element UI的Form，Table和Pagination组件组合在一起
05-02
元素搜索表分页 将Form，Table和Pagination组件组合在一起。 基于Vue2.x。 您可以使用此包在带有搜索表单和分页的表中显示本地和远程列表数据。安装$ npm i --save el-search-table-pagination演示版请参阅CodePen上...
（源代码）第03讲：uni-pagination实现表格分页查询
04-26
第03讲：uni-pagination实现表格分页查询
vue-sliding-pagination:一个滑动分页vue组件
08-04
分页组件的基本用法只需要当前页面、页面总数和在页面更改时调用的处理程序。 分页组件本身不处理页面更改，相反，您需要提供一个页面更改处理程序，该处理程序应包含所有页面更改逻辑（例如 vuex 商店调度），并...
pagination - 前端分页插件
11-20
前端带css样式的分页插件，详情https://blog.csdn.net/qq_36698956/article/details/84305728
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 214
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 361
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 396
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 584
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
el-table和el-pagination结合
10-17
el-table和el-pagination可以结合使用来实现表格数据的分页展示。具体实现步骤如下： 1. 在el-table组件中设置 :data 属性为表格数据数组，:columns 属性为表格列的配置数组。 2. 在el-pagination组件中设置 :total 属性为表格数据总数，:page-size 属性为每页展示的数据条数，@current-change 事件监听当前页码的变化。 3. 在el-table组件中使用 v-if 判断当前页码是否为该表格数据的页码，如果是则展示该页的数据，否则不展示。 以下是一个简单的示例代码： ``` <template> <div> <el-table :data="tableData" :columns="tableColumns"> <template slot="append"> <el-pagination :total="total" :page-size="pageSize" @current-change="handleCurrentChange" ></el-pagination> </template> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据数组 tableColumns: [], // 表格列的配置数组 total: 0, // 表格数据总数 pageSize: 10, // 每页展示的数据条数 currentPage: 1 // 当前页码 }; }, methods: { handleCurrentChange(val) { this.currentPage = val; } }, computed: { filteredTableData() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.tableData.slice(start, end); } } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值