vue3+element-plus实现分页功能

心安丷

已于 2022-08-27 16:39:05 修改

阅读量1.5k

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-08-27 11:37:04 首次发布

本文链接：https://blog.csdn.net/weixin_53437887/article/details/126556035

版权

本文介绍如何利用vue3和element-plus组件库实现分页功能，包括HTML结构、参数定义和功能实现。

摘要由CSDN通过智能技术生成

今天给大家分享的是用vue3+element-plus实现分页功能，话不多说直接上代码

这里是HTML部分：

<el-pagination
    v-model:currentPage="formJsonIn.page"
    :page-size="formJsonIn.page_size"
    :page-sizes="[10, 20, 30, 40, 50]

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心安丷

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3 + Element plus 分页

ootw的专栏

05-18

2944

我自己网上搜了好久都没搜到现成的，最后自己硬看文档，终于弄好了。废话不多说，我直接列出 HTML 部分和 TS 部分，供大家参考开发电脑上面的详细配置如下 vue 3.0.0-beta.1 + typescript3.9.3 "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "element-plus": "*", "npm": "^7.11.1", "video.js": "^7..

VUE3 +elementplus 分页功能实现

Grizzy的博客

07-17

5639

实现分页非常简单，获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得。

1 条评论您还未登录，请先登录后发表或查看评论

vue3+Element Plus功能组件封装——表格（含分页。一次性获取数据；分页获取数据）

热门推荐

wa_2021的博客

04-15

1万+

1、引入分页组件： <el-pagination :page-size="10" :pager-count="5" layout="total,sizes,prev,pager,next,jumper" :total="list.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" /> 2、data中初始化变量

vue3+element-plus实现分页

太阳上的雨天

07-10

672

vue3+element-plus实现分页

vue3+elementuiplus实现分页功能

前端小白在前进的博客

06-19

5004

在实际开发中，项目会遇到使用分页的情况，分页可以使从后端获取的数据进行部分性展示，从而大大提高了获取数据的效率、同时给使用者带来视觉上的舒适。实现逻辑小结实现分页非常简单，主要是获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得！......

使用Vue 3和Element Plus的分页组件功能

qq_39349120的博客

03-15

370

使用Vue 3和Element Plus的分页组件功能

基于tp5的vue+element-ui 实现分页

04-10

在本项目中，我们主要探讨如何使用`ThinkPHP5 (TP5)`框架，结合前端的`Vue.js`和`Element UI`组件库来实现数据的分页显示。`ThinkPHP5`是一个流行的PHP开发框架，它提供了丰富的MVC功能，方便开发者快速构建Web应用...

vue3使用element-plus搭建后台管理系统---菜单管理

07-01

在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...

Vue3+element-plus+axios 综合小案例

09-26

在这个小案例中，你可能会创建一个简单的应用，比如用户界面展示从服务器获取的数据，利用Element Plus的表格组件显示数据，同时提供搜索、排序和分页功能。Vue3的响应式系统和Element Plus的组件交互将使这个过程变...

vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件

04-19

vue3-pro-table 之前有一个是基于 vue2 开发的 vue3-pro-table 是基于 vue3 开发一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件特性将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果配置化的表格项，跟 el-table-column 的配置属性类似配置化的搜索表单，支持大部分表单元素配置化的分页，跟 el-pagination 的配置属性类似自定义是否显示搜索和分页自定义标题栏和工具栏丰富的插槽提供功能扩展使用安装和引入安装 // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table 引入该组件依赖

vue+element-ui+mybatis-plus+springboot实现分页查询功能

S_duxiu的博客

12-20

1847

Vue3+ElementPlus纯前端分页（手撕分页），无需修改后端

weixin_46407807的博客

11-19

2022

3.中的数据由原本的tableData更换为分页处理后的:paginatedData。4.紧接着标签下面加上el-pagination。2.如果有查询的，调用查询后重置页码。1、在script中加上。

vue3封装Element分页

qq_41154522的博客

03-29

340

vue3封装Element分页

Vue 3和Element组件库的分页功能实现

chen520的博客

07-02

5614

Vue 3是一个灵活的JavaScript框架，采用虚拟DOM和响应式数据的概念，使开发者能够高效地构建用户界面。Element作为一套基于Vue.js的UI组件库，提供了丰富的UI组件和美观的样式，无论是数据展示还是用户交互都能发挥巨大作用。为了使用Vue 3和Element，需要正确安装和配置它们。Vue 3是一个用于构建用户界面的JavaScript框架，它具有更高的运行时性能和更好的开发体验。

Element plus 分页居右

Fiona_lms的博客

07-27

2280

element plus 分页居右

[element plus] 分页组件使用 - vue

shaoyahu的博客

12-19

1375

饿了么plus的分页组件快速使用 , 别管这么多了 , 先复制了再说吧

在vue+elementUI中的分页功能

zuo_zuo_blog的博客

11-27

239

<template>  <div class="deit"> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item> <i class="el-ic...

vue3+springboot2+element-plus分页查询代码

05-29

前端代码（使用Vue3和Element Plus）： ``` <template> <div> <el-table :data="tableData" stripe> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </div> </template> <script> import { ref } from 'vue'; import { getTableData } from '@/api/example'; export default { setup() { const currentPage = ref(1); const pageSize = ref(10); const total = ref(0); const tableData = ref([]); async function getData() { const params = { currentPage: currentPage.value, pageSize: pageSize.value, }; const res = await getTableData(params); if (res.code === 200) { tableData.value = res.data.list; total.value = res.data.total; } } function handleCurrentChange(page) { currentPage.value = page; getData(); } getData(); return { currentPage, pageSize, total, tableData, handleCurrentChange, }; }, }; </script> ``` 后端代码（使用Spring Boot 2）： ``` @GetMapping("/tableData") public CommonResult<PageResult<TableData>> getTableData(@RequestParam(required = false, defaultValue = "1") Integer currentPage, @RequestParam(required = false, defaultValue = "10") Integer pageSize) { PageResult<TableData> pageResult = tableDataService.getTableData(currentPage, pageSize); return CommonResult.success(pageResult); } ``` 其中，`TableData`为实体类，`PageResult`为分页结果类。`tableDataService`为对应的Service类，用于查询数据。