Vue分页组件的封装方法

前言

这个是基于vue2的分页封装,仿照elementUI而写的组件。

效果如图

话不多说,直接上代码

<template>
  <div class="pagination">
    <!-- 总页数 -->
    <div class="total">共{{ total }}条</div>
    <!-- 选择每页的条数 -->
    <select name="" id="size_select" v-model="sizes" @change="sizeChange">
      <option v-for="item in pageSizes" :key="item" :value="item">
        {{ item }}条/页
      </option>
    </select>
    <div class="pagenum">
      <!-- 上一页 -->
      <el-button
        icon="el-icon-arrow-left"
        :disabled="backDisabled"
        circle
        @click="back"
      ></el-button>
      <!-- 页码 -->
      <ul>
        <li
          :class="currentPage == item ? 'active' : ''"
          v-for="(item, index) in pagenum"
          :key="index"
          @click="toPage(item)"
        >
          {{ item }}
        </li>
      </ul>
      <!-- 下一页 -->
      <el-button
        icon="el-icon-arrow-right"
        :disabled="forwardDisabled"
        circle
        @click="forward"
      ></el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "pagination",
  props: {
    total: {  // 总数
      type: null,
      required: true,
    },
    pageSizes: { // 可选择的每页条数
      type: Array,
    },
    pageSize: {  // 每页显示的条数
      type: Number,
      required: true,
    },
    currentPage: { // 当前页
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      sizes: this.pageSize,  // 接收props传来的pageSize
      nowPage: this.currentPage,  // 接收props传来的currentPage
    };
  },
  computed: {
    allPage() {  // 计算所有的页数
      return Math.ceil(this.total / this.pageSize);
    },
    backDisabled() {  // 是否禁用上一页
      return this.currentPage == 1;
    },
    forwardDisabled() { // 是否禁用下一页
      return this.currentPage == this.allPage;
    },
    pagenum() {   // 计算显示不同的页
      if (this.allPage - this.nowPage > 6) {  //  
        if (this.nowPage > 6) {
          return [
            1,
            "...",
            this.nowPage - 2,
            this.nowPage - 1,
            this.nowPage,
            this.nowPage + 1,
            this.nowPage + 2,
            "...",
            this.allPage,
          ];
        } else {
          if (this.allPage > 8) {
            return [1, 2, 3, 4, 5, 6, "...", this.allPage];
          } else {
            return this.allPage;
          }
        }
      } else {
        if (this.nowPage < 6) {
          return this.allPage;
        } else {
          return [
            1,
            "...",
            this.allPage - 5,
            this.allPage - 4,
            this.allPage - 3,
            this.allPage - 2,
            this.allPage - 1,
            this.allPage,
          ];
        }
      }
    },
  },
  methods: {
    sizeChange() {  // 每页限制条数改变触发事件
      this.$emit("sizeChange", this.sizes);
    },
    forward() {  // 点击下一页
      this.$emit("currentChange", (this.nowPage += 1));
    },
    back() {  // 点击上一页
      this.$emit("currentChange", (this.nowPage -= 1));
    },
    toPage(val) {  // 点击页数
      if (val == "...") {
        console.log(2);
      } else {
        this.nowPage = val;
        this.$emit("currentChange", val);
      }
    },
  },
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现分页组件

    本文实例为大家分享了vue实现分页组件的具体代码,供大家参考,具体内容如下 <template> <div class="pageBox"> <ul> <li v-if="this.condition.pageNo > 1 && this.pages.length > 4" class="sides"><a @click="prePage()"&

  • Vue.js实现一个自定义分页组件vue-paginaiton

    vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是,我再也不想直接操作DOM了.数据绑定式的编程体验真是好.实现的一个分页组件. 这里的css就不放出来了,可以看直接去github上下载:vue-pagination 先上一张实例图吧 模版 <div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur-

  • vue分页组件table-pagebar使用实例解析

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or

  • Vue中ElementUI分页组件Pagination的使用方法

    Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下 一.概要 ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页. 二.实现 1.基本用法 <div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

  • 基于vue2的table分页组件实现方法

    本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa

  • 基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

  • 使用vue.js制作分页组件

    学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O

  • Vue全局分页组件的实现代码

    需求 一个监控控制台界面,有成千上万条表格数据,需要做一个全局分页组件,支持调整每页显示数目.总页数.当前页数.前进后退.自由跳转页数. 字段 参数名 数据类型 说明 total Number 总条数 pageNo Number 总页数 limit Number 每页展示条数 原型 预期长酱紫(不要嫌丑!毕竟是后台控制台!) 代码 html <template> <div class="paging-content clearfix"> <div clas

  • vue 基于element-ui 分页组件封装的实例代码

    具体代码如下所示: <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, j

随机推荐