Paging component implemented using vue2.0

Recently using vue2.0 to reconstruct the project, I needed to implement a paging table. I didn’t find a suitable paging component, so I wrote one myself. The effect is as follows:

This project is built using vue-cli. If you do not use webpack in your project, please adjust it according to the code:

First create a new pagination.vue file. The codes for all components are written here. Write like this The component is not too difficult. It mainly solves the problem of value transfer between parent and child components.

<template>
  <nav>
    <ul class="pagination">
      <li :class="{&#39;disabled&#39;: current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>
      <li :class="{&#39;disabled&#39;: current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
      <li v-for="p in grouplist" :class="{&#39;active&#39;: current == p.val}"><a href="javascript:;"  @click="setCurrent(p.val)"> {{ p.text }} </a>
      </li>
      <li :class="{&#39;disabled&#39;: current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
      <li :class="{&#39;disabled&#39;: current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> »</a></li>
    </ul>
  </nav>
</template>

<script type="es6">
  export default{
    data(){      return {
        current: this.currentPage
      }
    },
    props: {
      total: {// 数据总条数        type: Number,default: 0  },
      display: {// 每页显示条数        type: Number,default: 10  },
      currentPage: {// 当前页码        type: Number,default: 1  },
      pagegroup: {// 分页条数        type: Number,default: 5,
        coerce: function (v) {
          v = v > 0 ? v : 5;          return v % 2 === 1 ? v : v + 1;
        }
      }
    },
    computed: {
      page: function () { // 总页数return Math.ceil(this.total / this.display);
      },
      grouplist: function () { // 获取分页页码var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;if (len <= this.pagegroup) {          while (len--) {
            temp.push({text: this.page - len, val: this.page - len});
          }
          ;          return temp;
        }while (len--) {
          temp.push(this.page - len);
        }
        ;var idx = temp.indexOf(center);
        (idx < count) && ( center = center + count - idx);
        (this.current > this.page - count) && ( center = this.page - count);
        temp = temp.splice(center - count - 1, this.pagegroup);do {          var t = temp.shift();
          list.push({
            text: t,
            val: t
          });
        } while (temp.length);if (this.page > this.pagegroup) {
          (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
          (this.current < this.page - count) && list.push({text: &#39;...&#39;, val: list[list.length - 1].val + 1});
        }return list;
      }
    },
    methods: {
      setCurrent: function (idx) {if (this.current != idx && idx > 0 && idx < this.page + 1) {          this.current = idx;          this.$emit(&#39;pagechange&#39;, this.current);
        }
      }
    }
  }</script>

<style lang="less">
  .pagination {
    overflow: hidden;
    display: table;
    margin: 0 auto;/*width: 100%;*/height: 50px;

  li {float: left;
    height: 30px;
    border-radius: 5px;
    margin: 3px;
    color: #666;  &
  :hover {
    background: #000;

  a {
    color: #fff;
  }

  }
  a {
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    border-radius: 5px;
    text-decoration: none
  }

  }
  .active {
    background: #000;

  a {
    color: #fff;
  }

  }
  }</style>

When used, introduce it in the parent component. The code is as follows:

<template>
        <v-pagination :total="total" :current-page=&#39;current&#39; @pagechange="pagechange"></v-pagination>
</template>

<script type="es6">
  import pagination from '@/components/common/pagination/pagination'export default{
    data(){ return {
        total: 150,     // 记录总条数display: 10,   // 每页显示条数current: 1,   // 当前的页数},
 methods: {
     pagechange:function(currentPage){
       console.log(currentPage);       // ajax请求, 向后台发送 currentPage, 来获取对应的数据 }
   },
components: {      'v-pagination': pagination,
    }
}</script>

At this point, a paging component based on vue2.0 is completed

The above is the detailed content of Paging component implemented using vue2.0. For more information, please follow other related articles on the PHP Chinese website!