前端实现分页--Vue

最新推荐文章于 2024-05-09 15:08:16 发布
最新推荐文章于 2024-05-09 15:08:16 发布
阅读量225 收藏
点赞数
分类专栏： 前端库的坑 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43260489/article/details/109306293
版权
template:<Table :columns="columns" // 自己实现 :data="currentTableList" :loading="loading"></Table> // 自己实现<Page :current="paginator.current" :total="paginator.totalCount" show-total class="margin-top-10 text-right" @on-change
摘要由CSDN通过智能技术生成

template:

<Table
  :columns="columns" // 自己实现
  :data="currentTableList"
  :loading="loading"></Table> // 自己实现
<Page
  :current="paginator.current"
  :total="paginator.totalCount"
  show-total
  class="margin-top-10  text-right"
  @on-change
最低0.47元/天 解锁文章
Jiangxin829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js 组件实现简单分页效果
易兒善
03-15 3万+
前言 为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。 效果 知识点 components 组件 props 父级
vue+Element-ui前端实现分页效果
01-18
本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码，供大家参考，具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户，用户看到的可能不是全部的数据，而是其中一部分，用户...
vue前端分页功能怎么实现
花生日记
05-28 3210
这样，当用户点击分页组件的页码时，`paginate`方法会被调用，从而更新`paginatedData`，实现分页功能。// 从服务器或其他地方获取数据，并将其赋值给allData。paginatedData: [], // 分页后的数据。allData: [], // 原始数据。// 获取数据的方法。
Vue2 实现前端分页
最新发布
weixin_65084919的博客
05-09 620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href=".
vue实现简单的前端分页功能
qq_40291247的博客
10-29 1126
html <template> <div> <table> <thead> <tr> <th>名称</th> <th>数量</th> </tr> </thead> ...
vue前端分页
wenxi2367的博客
04-03 314
显示，当前页是第几页。 当前页是动态的，需要在方法中去获取，调用方法的参数来自于Pagination这个前端对象。 当前页是个变量，需要经过计算，计算和输入的参数对应。
前端vue实现分页功能
weixin_42661959的博客
01-27 1万+
前端Vue实现分页功能 我们都知道在spring boot项目中安装pagehelper可以实现分页功能，但是在vue中也能在前端实现分页。 1、 首先，在data中定义以下变量： data() { return { list: null, listLoading: true, totalPage: 1, // 统共页数，默认为1 currentPage: 1, //当前页数 ，默认为1 pageSize: 5, // 每页显示数量 cu
vue实现前端分页完整代码
10-15
在这个问题中，我们讨论的是如何在Vue应用中实现前端分页功能。前端分页意味着在客户端处理分页逻辑，而不是在服务器端。这通常适用于数据量较小或实时更新需求不高的场景。 首先，让我们分析给出的代码片段。这个...
vue-sliding-pagination:一个滑动分页vue组件
08-04
npm install vue-sliding-pagination --save 或者，对于 fäncÿ 人来说， yarn add vue-sliding-pagination 浏览器 目前，没有可用的浏览器版本。 用法 分页组件的基本用法只需要当前页面、页面总数和在页面更改...
基于vue2.0实现仿百度前端分页效果附实现代码
12-29
上篇文章中，已经使用vue实现前端分页效果，这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例，我们在冻手实现的时候还是先想一想vue实现组件的思路 1、需要提前设定哪些参数需要...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue+element实现分页及条件搜索功能(纯前端分页).html
03-09
学习vue+element做用户条件分页查询遇到的坑! ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现)!
vuejs实现本地数据的筛选分页功能思路详解
10-19
今天做项目需要一份根据本地数据的筛选分页功能，下面小编把vuejs实现本地数据的筛选分页功能的实现思路分享到脚本之家平台，需要的朋友可以参考下
前端（Vue）实现自行分页的两种方法
热门推荐
小钻风的博客
03-08 3万+
前端做页面时，经常会遇到表格+分页的组合，有时因为一些原因，需要前端自己实现分页，下面介绍2中方法实现分页， 方法一：slice方法 slice(参数1，参数2)方法是返回一个新的数组对象 参数1：起始下标数 参数2：结束下标数(不计算在内) 如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3) slice方法详细讲解 这个原理就和分页原理很相似，分页也是把一个很长的数组，按照每页多少条（s
vue前端实现分页功能（当然数据量小的时候可用，建议后台实现）
夏夏
06-07 650
首先，在data中定义当前页与每页数 curpage:1,//当前页 pagesize:8,//每页显示数 其次，将查询出来的数据进行
使用vue＋elementUI页面实现前端做分页
如影随风
02-18 5551
当数据不是很多的时候，后端会要求前端来实现分页功能。那么下面讲下怎么使用element来实现前端做分页功能。由于功能比较简单，那么就直接上代码： // 计算当前页面的数据 tableList() { // this.displayData是当前页面要显示的数据 this.displayData=[] for ( 　　　　// pagesize是当前页面要显示...
vue+elemeng ui 前端处理数据做分页
Ms_alinda的博客
08-17 1098
需求点： 页面数据为前端本地数据，做分页处理。
vue3.0 封装通用分页组件
weixin_57246557的博客
09-24 509
目的：封装一个统一的分页组件。 分页的本质：分批次查询数据（基于页码page和每页条数pagesize）,后端接收到分页参数后，会基于这些参数查询数据库，然后基于数据库进行分页：基于SQL语句（select * from user limit n, m） 效果图 1.封装组件 src/components/pagination.vue <!-- 此组件需全局注册使用 --> <template> <div class="pagination"> <.
前端结合element-ui实现分页查询
05-18
你可以使用 element-ui 中的 `el-pagination` 组件进行分页查询的实现。 首先，需要在页面中导入 `el-pagination` 组件和相关的样式文件： ```html <template> <div> <!-- 分页列表 --> <el-pagination :page-size="pageSize" :current-page="currentPage" :total="total" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" /> <!-- 表格内容 --> <el-table :data="tableData" style="width: 100%" > <!-- 表头 --> <el-table-column prop="name" label="姓名" /> <el-table-column prop="age" label="年龄" /> <el-table-column prop="gender" label="性别" /> </el-table> </div> </template> <script> import { reactive, watch } from 'vue' import { ElTable, ElTableColumn, ElPagination } from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' export default { components: { ElTable, ElTableColumn, ElPagination }, setup() { // 响应式数据 const state = reactive({ tableData: [], // 表格数据 total: 0, // 总记录数 currentPage: 1, // 当前页码 pageSize: 10 // 每页显示数量 }) // 监听分页数据变化 watch([() => state.currentPage, () => state.pageSize], ([currentPage, pageSize]) => { // 根据当前页码和每页显示数量进行查询 fetchData(currentPage, pageSize) }) // 查询数据方法 const fetchData = (page, size) => { // 发送请求获取数据 // ... // 更新响应式数据 state.tableData = [/* ... */] state.total = 100 // 假设总记录数为100条 } // 处理页码变化事件 const handleCurrentChange = (currentPage) => { state.currentPage = currentPage } return { ...state, fetchData, handleCurrentChange } } } </script> ``` 在上面的代码中，我们使用了 `reactive` 函数创建了一个响应式的 `state` 对象，其中包含了表格数据、总记录数、当前页码和每页显示数量等数据。在 `watch` 函数中监听了当前页码和每页显示数量的变化，并在变化时触发 `fetchData` 方法进行数据查询。 在模板中，我们使用了 `el-pagination` 组件和 `el-table` 组件来构建分页查询列表。在 `el-pagination` 组件中，我们通过绑定 `pageSize`、`currentPage` 和 `total` 等属性来实现分页功能，并通过 `layout` 属性来配置分页组件的显示方式。在 `el-table` 组件中，我们使用了 `prop` 和 `label` 属性来定义表格的列信息，并通过 `:data` 属性来绑定表格的数据源。 最后，在 `setup` 函数中，我们定义了 `fetchData` 方法和 `handleCurrentChange` 方法来处理数据查询和页码变化事件，并将这两个方法返回给模板。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值