vue 分页组件及props传参

最新推荐文章于 2025-02-13 09:34:24 发布

开心大表哥

最新推荐文章于 2025-02-13 09:34:24 发布

阅读量2.4k

点赞数 3

分类专栏： vue项目开发文章标签： vue2-0分页 vue-props

本文链接：https://blog.youkuaiyun.com/a419419/article/details/76329800

版权

vue项目开发专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个基于Vue 2.0的分页组件实现方法，包括组件代码详解及如何与父组件交互完成数据更新，同时提供了使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看两张效果图：
这里写图片描述

接下来看看实现代码：
1.组件代码：由于是一个组件所以就简单粗暴的全部写在一个页面了
Pagination.vue

<!--
  params:
    pageNo: 总页数
    current: 当前的页码
 -->
<template>
  <div class="pager">
    <select class="select-page" @change="selectPage()">
                  <option value="10">每页10条</option>
                  <option value="15">每页15条</option>
                  <option value="20">每页20条</option>
    </select>
    <div class="page-right">
      <button class="btn btn-pager" :disabled="currentNow == 1" @click="prePage">
      <span aria-hidden="true"><i class="fa fa-angle-left"></i></span>
    </button>
    <span v-if="pageAll !== 1" class="page-index" v-bind:class="{'active':1 == currentNow}" @click="goPage(1)">1</span>
    <span v-if="preClipped" class="page-index">...</span>
    <span v-for="index in pages" class="page-index" v-bind:class="{'active':index == currentNow}" @click="goPage(index)">{{index}}</span>
    <span v-if="backClipped" class="page-index">...</span>
    <span class="page-index" v-bind:class="{'active':pageAll == currentNow}" @click="goPage(pageAll)">{{pageAll}}</span>
    <button class="btn btn-pager" :disabled="currentNow == pageAll" @click="nextPage">
      <span aria-hidden="true"><i class="fa fa-angle-right"></i></span>
    </button>
    </div>
  </div>
</template>
<script type="es6">
export default {
  name:'page',
  props: {
    // 用于记录总页码，可由父组件传过来
    pageNo: {
      type: Number,
      default: 1
    },
    // 用于记录当前页数，这个与父组件进行数据交互来完成每一页的数据更新，所以我们只要改变current的值来控制整个页面的数据即可
    current: {
      type: Number,
      default: 1
    }
  },
  data: function () {
    return {
      // 用于判断省略号是否显示
      backClipped: true, 
      preClipped: false,
      //通过这种方法处理从父组件传来的参数
      currentNow:this.current,
      pageAll:this.pageNo/10,
      pageAll1:this.pageNo
    }
  },
  methods: {
    selectPage(){
      this.pageAll = parseInt(this.pageAll1/$('.select-page').val());
      if(this.currentNow > this.pageAll){
        this.currentNow = this.pageAll
      }
    },
    prePage () {
      // 上一页
      this.currentNow--
      
    },
    nextPage () {
      // 下一页
      this.currentNow++
    },
    goPage (index) {
      // 跳转到相应页面
      if (index !== this.currentNow) {
        this.currentNow = index
      }
    }
  },
  computed: {
    // 使用计算属性来得到每次应该显示的页码
    pages: function () {
      let ret = []
      if (this.currentNow > 3) {
        // 当前页码大于三时，显示当前页码的前2个
        ret.push(this.currentNow - 2)
        ret.push(this.currentNow - 1)
        if (this.currentNow > 4) {
          // 当前页与第一页差距4以上时显示省略号
          this.preClipped = true
        }
      } else {
        this.preClipped = false
        for (let i = 2; i < this.currentNow; i++) {
          ret.push(i)
        }
      }
      if (this.currentNow !== this.pageAll && this.currentNow !== 1) {
        ret.push(this.currentNow)
      }
      if (this.currentNow < (this.pageAll - 2)) {
        // 显示当前页码的后2个
        ret.push(this.currentNow + 1)
        ret.push(this.currentNow + 2)
        if (this.currentNow <= (this.pageAll - 3)) {
          //当前页与最后一页差距3以上时显示省略号
          this.backClipped = true
        }
      } else {
        this.backClipped = false
        for (let i = (this.currentNow + 1); i < this.pageAll; i++) {
          ret.push(i)
        }
      }
      // 返回整个页码组
      return ret
    }
  }
}
</script>
// 组件样式
<style scoped>
.pager {
  text-align: center;
}
.select-page{
  float: left;
  padding: 0px;
  margin-left: 31px;
  width: 80px;
  height: 24px;
  text-align: center;
  border:1px solid #CCCCCC;
  color: #999999;
  cursor:pointer;
}
.page-right{
  float: right;
  margin-right: 24px
}
.btn-pager {
  margin-left: 10px;
  padding: 0px;
  width: 24px;
  height: 24px;
  text-align: center;
  background-color: #ffffff;
  color: #CCCCCC;
  border: 1px solid #e3e3e3;
  border-radius: 0px;
  cursor:pointer;
}
.btn-pager:hover {
  background-color: #f2f2f2;
}
.page-index {
  display: inline-block;
  margin-left: 4px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-color: #ffffff;
  cursor: pointer;
  color: #000000;
}
.active {
  color: #ffffff;
  background-color: #FFA600;
}
</style>

2.看配合父组件如何使用：

<page v-bind:page-no="1000" v-bind:current="5"></page>

3.不要忘了引入和加载一些必要的文件及配置一下组件
components: {
page
}
import ‘./assets/css/font-awesome-4.7.0/css/font-awesome.min.css’
import $ from ‘jquery’
import page from ‘…/…/components/page/page’;

希望可以帮到用vue2.0的各位小白！！！