在 Vue 3 中实现页码切割与折叠

已于 2022-04-29 22:24:06 修改
阅读量581 收藏
点赞数 1
分类专栏： web前端 文章标签： vue3 分页
于 2022-04-19 22:53:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangfulin/article/details/124285851
版权

无论是前端还是后端，以手动造轮子的方式来实现页面内容分页，都是一件比较麻烦的事。

我们这里不讨论具体分页方式，只来看看前端如何应对页面底部那一行内容分页后的页码列表。

普通效果：
在这里插入图片描述
当页码数量非常多时，就是这种效果：
在这里插入图片描述
这就需要对页码进行折叠与切割，期望效果如下：
在这里插入图片描述
在这里插入图片描述

未完待续。。。。。。

dangfulin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 带纵向合并的原生表格实现切割侧栏分页
白瑕 的博客
10-31 528
带纵向合并的表格, 到达固定行数强制分页, 截断本页纵向合并, 在下页展示该纵向合并的剩余部分
js 实现分页自动折叠
zhangzuruiqqq的博客
01-04 310
// 分页折叠的方法 pages所有页码的数组 current当前的页码 viewsize要显示几个 var foldpages = function (pages, current, viewsize) { var ret = [].concat(pages), min = 1, max = ret.length, dots = '…', remain; current = Math.max(min, Math.min(curre
Vue3折叠面板（Collapse）
Mr Dear的博客
03-29 8264
可以折叠/展开的内容区域，可嵌套，可满足你的所有幻想😁
vue-splitpane页面分割
08-22 1687
<template> <div class="components-container"> <split-pane split="vertical" @resize="resize"> <template slot="paneL"> <div class="left-container" /> </template> <template slot="paneR"&gt
Vue3: 数据过多条数的隐藏与展示(展开折叠功能)
weixin_44016350的博客
12-15 3211
Vue3: 数据过多条数的隐藏与展示(展开折叠功能)
Vue 实现展开折叠效果的示例代码
10-18
主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3 实现 H5 砸金蛋 中大奖
07-06
在本文中，我们将深入探讨如何使用Vue3框架来构建一个H5移动端的“砸金蛋”小游戏。Vue3是目前非常流行的前端JavaScript框架，它以其高效、易学和灵活的特性受到开发者的喜爱。结合H5技术，我们可以创建出交互性强、...
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3 实现 chatgpt 的打字机效果
04-16
在Vue3中实现ChatGPT的打字机效果，我们需要理解Vue3的响应式系统、事件处理机制以及如何模拟打字动画。ChatGPT的打字机效果通常指的是文字逐个字符显示，就像真正的打字机一样，带有停顿和回车等效果，这种效果在...
vue-列表下详情的展开与折叠案例
10-15
在Vue开发中，列表下详情的展开与折叠是常见的交互设计，用于优化用户体验，避免一次性加载大量数据导致页面拥挤。这个案例主要展示了如何在Vue中实现这样的功能。以下是对该案例的详细解析： ### 功能描述 1. **...
VUE页码控件
07-11
非常好的用的页码控件，已经测试过了，下载下来可以直接使用
vue-splitter-pane-一个Vuejs组件，以可调整的拆分方式（垂直或水平）呈现两个插槽。-Vue.js开发
05-27
Vue拆分器窗格演示vue-splitter-pane是Vuejs组件，它以可调节的拆分方式（垂直或水平）呈现两个插槽。 使用Vue拆分器窗格演示vue-splitter-pane是Vuejs组件，它以可调节的拆分方式（垂直或水平）呈现两个插槽。 使用伸缩框进行大小调整。 安装和用法$ npm install vue-splitter-pane Vue全局用法从'vue-splitter-pane'导入VueSplitter Vue.use（VueSplitter）; ＃从'vue-splitter-pane'Vue.extend（{...，compone）注册vue-splitter，vue-splitter-v和vue-splitter-h Vue本地用法导入VueSplitter，{VueSplitterH，VueSplitterV}
split-pane:基于Vue 实现面板分割组件
05-09
面板分割组件(Vue) npm i npm start 具体详情
vue中使用原生实现展开折叠效果
weixin_46069849的博客
02-19 573
<div class="oBank"> <span class="bankName">银行(复选):</span> <ul ref="List" class="oUl"> <li v-for="city in cities" :key="city">{{city}}</li> </ul> <div class="..
Vue3分页（Pagination）
Mr Dear的博客
03-08 5855
Vue3+ts+less实现的分页组件。
vue实现折叠组件-collapse
热门推荐
Only_ruiwen的博客
11-09 1万+
相信大家对于下面的列表形式应该不陌生吧，至少我个人在后台OA系统的时候就用到了，那么我来聊下这样形式的列表，应该怎么封装成为一个公共的组件。（代码参考了iview用于个人学习之用） 一.列表组件参数设置 每一个公共组件都应该约定好参数，定义好回调函数所传递参数。不应该与业务组件和业务逻辑相互耦合。 这个组件的约定参数和使用方法如下： <Collapse v-model="value1" @...
vue实现折叠收起功能-展开收起功能
weixin_41815063的博客
06-13 2607
<template> <div class="resume-list"> <div class="preview_header"> <div class="header"> <img class="header_left" src="../images/left_icon.png" alt="" @click="clickGoBack.
vue 折叠,展开效果JS
qq3225592的博客
11-25 297
//在当前页面导入JS文件 import collapseTransition from "./isActive"; //然后使用标签框中需要折叠，展开的内容。v-if控制。 <collapseTransition> <SimpleTables v-if="isActive" :head-data="headData" :body-data...
vue大型项目拆分_vue代码分割的实现(codesplit)
weixin_39713578的博客
12-20 1814
在vue单页应用中，若不做任何处理，所有vue文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。一、未分割时浏览器加载js的情况可以看到，只有一个app.js，大小为595kb，若在实际的大型项目中，这个大小会更大二、做了代码分割后浏览器加载js情况...
vue3实现折叠与展开组件
最新发布
11-12
Vue 3 中实现折叠与展开组件可以使用 v-if 或 v-show 指令来控制元素的显示和隐藏。 方法1：使用 v-if 指令 在模板中使用 v-if 指令来判断是否显示折叠内容。当某个状态满足需要折叠时，对应的元素会被删除或添加到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值