vue实现简单的分页组件

短命女 2022-04-06 06:58 414阅读 0赞

在日常的工作中，总会遇到分页的使用，这次开始学习vue，就自己动手写一个简单的分页组件。

组件的样式采用的是 ***bootstrap ***的分页，在此基础上添加分页的部分代码。

直接上代码，仅供参考：

*1) template模板部分：*

<script type="text/x-template" id="page">

<nav aria-label="Page navigation">

<ul class="pagination">

<li :class="\{'disabled':current == 1\}"  @click="current!=1 &&current-- && goto(current--)">

<a href="\#" aria-label="Previous" :disabled="current==1">

<span aria-hidden="true">&laquo;</span>

</a>

</li>

<li v-for="index in pages.totalPage" @click="goto(index)" :class="\{'active':current == index\}" :key="index" >

<a href="\#">\{ \{index\}\}</a>

</li>

<li :class="\{'disabled':pages.totalPage == current\}"  @click="current!=pages.totalPage &&current++ && goto(current++)">

<a href="\#" aria-label="Next">

<span aria-hidden="true">&raquo;</span>

</a>

</li>

</ul>

</nav>

</script>

*2)  组件的定义：*

Vue.component("paginator",\{

template:'\#page',

props: \['pages'\],

data:function()\{

return\{

current:1,

limit:10

\}

\},

methods:\{

goto:function(index)\{

if(index == this.current) return;

this.current = index;

//处理后续的请求

\}

\}

\});

*3) 组件的使用*

<div id="app"><paginator v-bind:pages="page"></paginator></div>

var vm = new Vue(\{

el:'\#app',

data:\{

page:\{

totalPage:7

\}

\}

\})；

简单的分页组件实现完毕。

页面展示效果如下：

![49eae63d-52b4-3bc3-8143-3f12dda2d582.png][]  
 附件自己的测试文件。

[49eae63d-52b4-3bc3-8143-3f12dda2d582.png]: /images/20220406/4583570fe8bd4d51be91dfac4e67f9ee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue分页组件封装

vue分页组件封装座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的（爱笑，傻傻的）这样一个人 -------------------- 文章目录

刺骨的言语ヽ痛彻心扉/ 2022年12月28日 07:17/ 0 赞/ 153 阅读

相关前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口

前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了，主要

女爷i/ 2022年11月18日 13:47/ 0 赞/ 493 阅读

相关简单实现分页

实现分页！利用sql语句。 mysql的话就是利用limit ![这里写图片描述][SouthEast] 就在DAO类中增加有一个方法 findPage();

- 日理万妓/ 2022年07月13日 07:52/ 0 赞/ 199 阅读

相关分页查询的简单实现

分页查询的简单实现分页查询无非有两种实现方式: 1. 将数据库中全部数据读取出来, 在分段获取 2. 直接读取需要显示的数据条数使用第一种方法需要专门的缓存

客官°小女子只卖身不卖艺/ 2022年06月15日 03:39/ 0 赞/ 230 阅读

相关 vue实现一个分页组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

女爷i/ 2022年06月04日 01:21/ 0 赞/ 236 阅读

相关 vue 简单分页

vue 简单分页样式： .page-bar { -webkit-touch-callout: none; -web

谁借莪１个温暖的怀抱￠/ 2022年05月24日 08:00/ 0 赞/ 199 阅读

相关利用vue实现的分页组件

/ 使用组件： <pagination></pagination> 组件中传入的属性有： 1、total ：一共有多少条数据：必选参数

男娘i/ 2022年05月18日 04:52/ 0 赞/ 222 阅读

相关 Vue实现分页组件

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: ![1055753-20170621203654163-89

た入场券/ 2022年05月14日 00:44/ 0 赞/ 276 阅读

相关 ElementUI分页组件+Vue

一. ElementUI分页组件 1 官网官网地址：http://element-cn.eleme.io/\/zh-CN 2 入门案例：第一步：创建vu

痛定思痛。/ 2022年04月17日 06:42/ 0 赞/ 350 阅读

相关 vue实现简单的分页组件

在日常的工作中，总会遇到分页的使用，这次开始学习vue，就自己动手写一个简单的分页组件。组件的样式采用的是 bootstrap 的分页，在此基础上添加分

短命女/ 2022年04月06日 06:58/ 0 赞/ 415 阅读