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

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

首先我们写一个分页组件 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>

然后我们在父组件里去引用这个分页组件，用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);
        });
    }
}

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

转载于:https://www.cnblogs.com/zdd2017/p/9714633.html