推荐基于VUE2.0自定义分页插件

2023-11-12

基于vue2.0实现的自定义分页 可设置每页显示条数,带跳转框直接跳转到相应页面
文档地址:https://gitee.com/it__distant_branch/vue-custom-pages

实现效果如下
在这里插入图片描述

支持功能

- [x] 自定义分页条数
- [x] 跳转某一页

联系方式

- 微信: 18888320271

快速上手

1. npm安装  `npm i --save vue-custom-pages`
2. main.js中引入 ` 
				      import customPages from 'vue-custom-pages' ; 
			      Vue.use(customPages)
			      `
4. 使用
  `
  <template>
      <div id="app">
        <vue-custom-pages :total="1000" active-color="red" page-size="20" show-count v-model="page" @change="search"          show-elevator :size='[10,20,30,40]'   ></vue-custom-pages>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    search(page,pageSzie){
        console.log("当前页:",page)
        console.log("当前页大小:",pageSzie)
    }
  },
  data () {
    return {
      page:1
      
    }
  }
}
</script>
`

参数说明

参数 说明 类型 默认值 可选值
total 总条数 Number String 0
page-size 页大小 Number String 10
show-elevator 是否显示快速跳转到某一页 Boolean false true
v-model 当前页 Number String 1
size 可以切换每页显示的数量 Array []
show-count 是否显示总页数 Boolean false true
active-color 选中页背景色 String #2979ff
next-name 下一页按钮名称 String >
pre-name 上一页按钮名称 String <
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

推荐基于VUE2.0自定义分页插件 的相关文章

随机推荐

  • VS里面关于.cpp文件与.cu文件混合编译问题---不要在.cpp文件声明核函数(__device__()和global__())

    原文出处 点击打开链接 不要在 cpp文件声明核函数 否则会报错 具体可以参考下面两个链接 http blog csdn net lingerlanlan article details 25063331 utm source tuicoo
  • 如何自己手动搭建一个RSS订阅机器人(rssbot),自己做一个RSS阅读器

    当你想RSS订阅一些自己感兴趣的博客 却又苦于免费的RSS阅读器广告很多时 可以自己借助Telegram机器人搭建一个RSS订阅机器人 本文老王介绍下如何搭建一个Telegram RSS订阅机器人 以及如何把RSS订阅机器人拖到Telegr
  • JAVA - 可变对象与不可变对象

    不可变对象在并发程序中比较有用 由于其状态无法改变 因此无法被线程的干扰损坏或者被视为不一致状态 基本概念 不可变对象 Immutable Objects 即对象一旦被创建它的状态 对象的数据 也即对象属性值 就不能改变 任何对它的改变都应
  • U3D Transform基本移动函数: 移动、旋转、缩放

    1 指定方向移动 移动速度 float TranslateSpeed 10f Vector3 forward 表示 向前 transform Translate Vector3 forward TranslateSpeed 2 全方向移动
  • Java 8新特性探究(十一)Base64详解

    2019独角兽企业重金招聘Python工程师标准 gt gt gt BASE64 编码是一种常用的字符编码 在很多地方都会用到 但base64不是安全领域下的加密解密算法 能起到安全作用的效果很差 而且很容易破解 他核心作用应该是传输数据的
  • 数字IC时钟

    目录 前言 1 时钟的概念与性质 2 时钟源 3 时钟管理模块 3 1 时钟门控 3 2 时钟分频 3 3 时钟切换 前言 时钟信号对于整个芯片的功能有着至关重要的作用 一旦芯片级的时钟信号质量不高 会导致许多不受控的异常bug 本人目前还
  • 数据库(第五版)课后习题答案

    仅供参考 有任何问题概不负责 请同学们谨慎参考 数据库系统概论第五版 答案 第1章 绪论 1 试述数据 数据库 数据库系统 数据库管理系统的概念 答 l 数据 Data 描述事物的符号记录称为数据 数据的种类有数字 文字 图形 图像 声音
  • inc指令是什么意思_工作台自动循环运动PLC控制指令与梯形图

    点击箭头处 工业之家 选择 关注公众号 工作台自动循环运动PLC控制指令与梯形图 一 数据传送指令 数据传送指令包括MOV 传送 SMOV BCD码移位传送 CML 取反传送 BMOV 数据块传送 FMOV 多点传送 XCH 数据交换 这里
  • FeignClient注解中各种属性详解

    一 value name 这两个属性的作用是一样的 如果没有配置url 那么配置的值将作为服务的名称 用于服务的发现 反之只是一个名称 注意 这里写的是你要调用的那个服务的名称 而不是你自己的那个服务的名称 另外 如果同一个工程中出现两个接
  • C语言 IDE的介绍及安装

    目录 C语言 IDE介绍 GCC C Free Code Blocks CLang CLion XCode Dev C Turbo C Visual C 6 0 Visual Studio C语言 IDE安装 安装包 版本选择 注意事项 C
  • 使用VMware给Ubuntu增加磁盘容量

    一般只给虚拟机里面的Ubuntu很少的空间 到了空间不足就尴尬了 那么就扩充磁盘解决问题吧 一 VMware手动扩容 打开虚拟机 选择你要扩充的客户机 点击 编辑虚拟机设置 然后详细设置 选择硬盘 gt 扩展 gt 目标总磁盘大小 不是增量
  • [力扣c++实现] 152. 乘积最大子数组

    152 乘积最大子数组 给你一个整数数组 nums 请你找出数组中乘积最大的非空连续子数组 该子数组中至少包含一个数字 并返回该子数组所对应的乘积 测试用例的答案是一个 32 位 整数 子数组 是数组的连续子序列 示例 1 输入 nums
  • xshell无法连接虚拟机原因Connection failed. Type `help' to learn how to use Xshell prompt.

    问题分析 xshell无法连接的问题有多种 比如虚拟机没有安装ssh服务 虚拟机没有启动ssh服务 又或者是防火墙 禁用端口等问题 这些都比较容易解决 下面我介绍的是我遇到的一种比较难的无法连接情况 VMware无法在Windows下创建适
  • Proxy(代理)服务器

    代理服务器 代理服务器必须有DNS地址 如果开启转发需要在客户端设置DNS地址 NAT 是直接与目标服务器通信的 也就是直接访问的baidu服务器 目标地址是baidu服务器的地址 所以必须要有DNS来解析主机名 如果是通过代理客户端是没有
  • 全球及中国生物技术产业创新发展模式及十四五应用方向研究报告2021-2027年

    全球及中国生物技术产业创新发展模式及十四五应用方向研究报告2021 2027年HS HS HS HS HS HS HS HS HS HS HS HS HS HS HS HS HS HS 修订日期 2021年10月 搜索鸿晟信合研究院查看官网
  • 交叉编译器简介以及ARM交叉编译器arm-linux-gcc

    一 交叉编译器简介 在一种计算机环境中运行的编译程序 能编译出在另外一种环境下运行的代码 这个编译过程就叫交叉编译 简单地说 就是在一个平台上生成另一个平台上的可执行代码 二 体系结构与操作系统 1 常见的体系结构有ARM结构 x86结构等
  • SPSS异常值处理编程

    SPSS异常值处理编程 异常值是指在数据集中与其他观测值相比明显不同的值 在数据分析过程中 异常值可能会对结果产生不良影响 因此需要进行异常值处理 SPSS作为一种广泛使用的数据分析工具 提供了多种方法来检测和处理异常值 本文将介绍SPSS
  • 【python】UI自动化——鼠标悬浮显示二级菜单相关操作

    一 来个百度示例吧 想要点击如下图的图片 先上代码 import time from selenium import webdriver from selenium webdriver import ActionChains def sta
  • matlab 数据降维和重构_处理不平衡机器学习数据时需要了解的技术

    我们在处理真实世界机器学习数据集时遇到的主要挑战之一是数据的比例不平衡 欺诈检测是这类数据的最好例子 在本文中 我们将使用kaggle中的信用卡欺诈检测数据集 www kaggle com mlg ulb creditcardfraud 在
  • 推荐基于VUE2.0自定义分页插件

    基于vue2 0实现的自定义分页 可设置每页显示条数 带跳转框直接跳转到相应页面 文档地址 https gitee com it distant branch vue custom pages 实现效果如下 支持功能 x 自定义分页条数 x