Vue2.0 + Element-ui2+axios实现分页

实现分页的思路大致如下：

1. 在Vue的data中定义一个数组，用于存放分页数据。
2. 在mounted函数中发起请求获取数据，并将数据存放到定义的数组中。
3. 在页面上使用Element-ui的Table组件展示数据，并且使用Pagination组件实现分页功能。
4. 当用户点击分页按钮时，触发pagination的current-change事件，重新请求数据并更新数组中的数据。

以下是一个简单的例子：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(response => {
        this.tableData = response.data.list;
        this.total = response.data.total;
      });
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData();
    }
  }
};
</script>

在上面的例子中，我们使用了Element-ui的Table和Pagination组件，并且使用axios来发起请求。在mounted函数中，我们调用fetchData函数来获取数据，并将数据存放到tableData数组中。在页面上，我们将tableData数组作为Table组件的data属性传递，展示数据。同时，我们使用Pagination组件来实现分页功能。当用户点击分页按钮时，我们调用handlePageChange函数来更新currentPage变量，并重新调用fetchData函数来获取新的数据。