vue2.0 + Element UI + axios实现表格分页

注：本文分页组件用原生 html + css 实现，element-ui里有专门的分页组件可以不用自己写，详情见另一篇博客：https://www.cnblogs.com/zdd2017/p/11153527.html

 

表格分页有两种实现方式：前端分页和后端分页。前端分页会一次性从后端拿到所有数据，然后分页展示在页面上，适合数据量比较小的情况；后端分页是每次从后端拿到当前页的数据展示在页面上，也就是说每次切换页码时都要向后端发起请求，适合数据量比较大的情况。本文采用后端分页，要介绍的是采用后端分页方法时的前端写法。

首先我们写一个分页组件 pagination.vue， 效果如下：

我们来分析一下这个组件的实现，首先"《" 、"首页"、 "尾页" 、"》" 这四个地方是固定不变的，再定义一个变量pageGroup表示分页条数，这里的pageGroup=5，大于5的时候右边会出现"..."，当前页大于Math.ceil(pageGroup / 2)时左边会出现"..."。选择页码时，显示的分页也会跟着变化，这里我们用一个数组存储所有页码，然后根据点击的页码分割数组得到想要的部分，下面来看一下具体实现代码：

<template>
  <nav>
    <ul class="pagination">
      <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>
      <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
      <li v-for="p in grouplist" :key="p.id" :class="{'active': current == p.val}">
        <a href="javascript:;" @click="setCurrent(p.val)"> {{ p.text }} </a>
      </li>
      <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
      <li :class="{'disabled': 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 () { // 获取分页页码
      let len = this.page;
      let temp = [];
      let list = [];
      let count = Math.floor(this.pagegroup / 2);
      let center = this.current;
      if (len <= this.pagegroup) {
        for (let i = 1; i <= len; i++) {
          list.push({text: i, val: i});
        }
        return list;
      }
      for (let i = 1; i <= this.page; i++) {
        temp.push(i);
      }
      (center < count + 1) && (center = count + 1); // 当前页是开头几页时保持center是count + 1不变
      (center > this.page - count) && (center = this.page - count); // 当前页是末尾几页时保持center是this.page-count不变
      temp = temp.splice(center - count - 1, this.pagegroup);
      for (let j = 0; j < temp.length; j++) {
        list.push({
          text: temp[j],
          val: temp[j]
        });
      }
      (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
      (this.current < this.page - count) && list.push({text: '...', 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('pagechange', this.current);
      }
    }
  }
};
</script>

<style lang="less">
  .pagination {
    overflow: hidden;
    display: table;
    margin: 0 auto;
    height: 30px;
    border: 1px solid rgb(241, 241, 241);
    border-radius: 5px;
    li {
      list-style:none;
      float: left;
      height: 30px;
      border-radius: 5px;
      margin: 3px;
      &:hover {
        background: #000;
        a {
          color: #fff;
        }
      }
      a {
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        color: #666;
        text-decoration: none
      }
    }
    .active {
      background: #000;
      a {
        color: #fff;
      }
    }
  }
</style>

然后我们在父组件里去引用这个分页组件，用vue2.0 + Element UI写好表格，并传参给分页组件

<template>
  <div class="index">
    <div class="grid">
      <el-table :data="tableData" border style="margin-bottom:14px;">
        <el-table-column width="55" type="selection" align="center"></el-table-column>
        <el-table-column property="id" label="队列号" align="center"></el-table-column>
        <el-table-column property="queueName" label="队列名" align="center"></el-table-column>
        <el-table-column property="filed" label="队列内容" align="center"></el-table-column>
        <el-table-column property="hdfsdir" label="hdfs目录" align="center"></el-table-column>
        <el-table-column property="localDir" label="本地目录" align="center"></el-table-column>
      </el-table>
      <v-pagination :total="total" :display="display" :current-page='current' @pagechange="pagechange"></v-pagination>
    </div>
  </div>
</template>

在data里注册需要用到的一些变量

data () {
  return {
    tableData: [],
    total: 0,
    limit: 10,
    current: 1
  };
}

现在我们需要向后端请求数据，需要传给后端的参数是当前页即首页currenPage=1以及每页显示的数据量（这里假设为10）

created () {
    Axios.get('/queue/online?page=1&limit=10')
      .then((response) => {
      // list数组是后端返回的10条数据
        this.tableData = response.data.list;
      })
      .catch((error) => {
        console.log(error);
      });
  },

这样我们表格中就出现了从后端拿到的第一页的10条数据，当我们点击页码时，也要向后端重新发起请求

methods: {
    pagechange (currentPage) {
      // console.log(currentPage); // ajax请求, 向后台发送 currentPage, 来获取对应的数据
      Axios.get('/queue/online?page=' + currentPage + '&limit=' + this.display)
        .then((response) => {
          this.tableData = response.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    }
}

至此已可实现表格分页效果，希望能对大家有所帮助。