通过Element ui往页面上加一个分页导航条

最新推荐文章于 2023-09-26 15:14:32 发布
最新推荐文章于 2023-09-26 15:14:32 发布
阅读量1.8k 收藏 13
点赞数 6
分类专栏： 基于SpringBoot+Vue的健身会员管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45950109/article/details/116402705
版权
这篇博客详细介绍了如何在Vue项目中利用Element UI的Pagination组件实现分页导航条。从需求分析到组件选择，再到UserList.vue组件的template模板代码展示，以及涉及到的数据和方法，最后通过一系列截图展示了分页功能的测试过程，包括页面大小的更改和页码的跳转操作。
摘要由CSDN通过智能技术生成

文章目录

通过Element ui往页面上加一个分页导航条

需求

加入一个分页条，此分页条可以跳转页面，可以根据页码选择具体页面，可以设置当前页面的大小。

在element ui官网选择Pagination分页组件

进入element ui官网，然后选择一个合适的分页组件，如下图：

在这里插入图片描述

UserList.vue组件的template模板中的分页组件的代码和效果

分页组件的代码如下图：

在这里插入图片描述

分页组件的效果如下图：

在这里插入图片描述

<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Mr-X～
关注
专栏目录
订阅专栏
Element-UI快速入门
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
elementUi中steps步骤条的使用
ME_GIRL的博客
01-09 6035
elementUi中steps步骤条的使用 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。 使用 <template> <div class="contentBox"> <div> <div class="stepContent"> <div class="stepBgBox"> <div class="stepBox">
element-ui 封装页面步骤导航定位条
wuww18stu的博客
04-20 1824
element-ui 封装页面步骤导航定位条 最近在用element-ui组件开发项目，项目页面中，由于页面比较长，所以页面右侧设计了步骤导航定位条，滚动页面后，右侧步骤条跟着滚动，并且右侧同步显示页面滚动到哪个模块上，查看了element-ui组件库，发现并没有现成的组件，所以自己封装了一个，便于项目中其它页面使用。 mounted() { window.addEventListen...
element 分页
lh95lbw的博客
10-25 832
html: &lt;li v-for="(item,index) in CamerList" :key="index" v-if="index&lt;pagenum &amp;&amp; index&gt;=pagenums"&gt; &lt;!--分页--&gt; &lt;div&gt; &lt;el-pagination @curr
element组件---导航组件
weixin_45343882的博客
08-08 993
NavMenu 导航菜单 为网站提供导航功能的菜单。 顶栏 适用广泛的基础用法。 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-i...
HTML+VUE+element-ui通过点击不同按钮展现不同页面
最新发布
m0_62314761的博客
09-26 2196
点击不同按钮展现不同页面
版本2.4 element-ui 离线中文文档api
01-05
5. **导航组件**：Menu（菜单）、Breadcrumb（面包屑）、Pagination（分页）、Step（步骤条）、Tabs（标签页）等，帮助用户在应用中导航。 6. **弹窗组件**：Dialog（对话框）、Alert（警告）、Confirm（确认对话框...
Element UI元件库.zip
06-03
3. **布局组件**：栅格系统（Grid）、卡片（Card）、折叠面板（Collapse）、导航菜单（NavMenu）、步骤条（Steps）等，帮助设计师构建页面结构和导航。 4. **数据展示**：表格（Table）、标签页（Tabs）、分页...
element-ui 离线中文文档api下载 版本2.4
09-19
6. **导航组件**：包括 Navigation Bar（导航栏）、Menu（菜单）、Breadcrumb（面包屑）、Pagination（分页）、Steps（步骤条）等，帮助用户在应用中导航。 7. **数据展示组件**：Table（表格）、Tag（标签）、...
Vue+ElementUI从零开始搭建自己的网站（二、导航组件）
热门推荐
xuehu837769474的博客
08-24 2万+
创建导航页组件 我们在src目录下新建一个文件夹，名为components，今后我们的组件都会放在这个文件夹中。在components目录下新建一个Navi目录，在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示： 然后我们修改main.js文件，修改后的文件如下 import Vue from 'vue' import ElementUI from ...
vue + elementui 实现动态侧边导航栏
m0_64344940的博客
01-17 7849
vue + elementui 实现动态侧边导航栏
element-ui组件的使用，导航菜单（NavMenu）组件、分页组件的使用
嗨皮的博客
02-01 6754
基于vue2项目中elementUI组件的简单使用方法
elementui实现标签页与菜单栏联动
qq_41026858的博客
01-06 2586
技术：vue2+vuex+elementui store/index.js文件里 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { tabList:[] }, mutations: { addTab: (state, tab) => { // 如果tab已经存在，不添加新的tabs if (st
Vue使用Element-UI实现分页效果
见证自己学习,成长的记录
02-04 9997
分页在展示数据列表的场景肯定是非常多的。一般的项目开发中，数据量特别大，一般都是后端接口直接处理分页返回，前端直接调用即可。但是前端也是可以不需要借助后端，自己也是可以处理分页的。今天我这个后端开发就站在前端的角度上，处理列表分页。友情提示：数据量大的情况下一定要后端处理分页，前端虽然可以实现，但是仅限数据量不是特别大的情况下！先给大家看下我的列表，一个特别单纯的列表，只是返回一个用户列表，并且根据id倒叙排序。感觉elementui对分页组件做的特别好。
Element -Ui之NavMenu导航栏
m0_50007683的博客
05-03 1万+
一、NavMenu重要标签和参数说明 mode：导航栏的模式，默认值vertical 导航栏处于垂直状态，改为horizonta可变为水平模式。 index：唯一标志。 default-active：激活当前菜单的index。 router： 是否使用路由，启用后可以通过index作为地址进行跳转。 <el-menu-item index="1">导航栏中的子菜单标签。 <el-submenu> 生成二级菜单。 代码实现..
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
vue+element封装分页组件＜每页条数由用户自定义＞
haibo1101的博客
04-19 3340
背景：因为当前项目主要是表格文件和数据的一个显示，所以大量的用到分页功能，思前想后决定写一个分页组件，方便美观。因为前端人员不是我自己，加上产品的建议，最后决定分页写定每页二十天条数据。 首先在项目的根目录下创建可复用组件 在components里面创建需要的组件 在组件里写入代码主要是涉及到父传子和子传父，因为刚开始写可复用封装组件，所以没敢写的太复杂 <template> <el-pagination :total="total" :current-pag.
vue elementUI el-pagination 分页器的使用细节
qq_41974250的博客
03-23 6905
vue elementUI el-pagination 分页器的使用细节
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr-X～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值