Vue + elementUI请求数据和分页

参考：简单的VUE+elementUI请求数据和分页

<!-- 内容区域 -->
<el-main id="main" class="main">
  <Breadcrumb></Breadcrumb>

  <!-- 表格 -->
  <div class="table">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="ID" width="100"> </el-table-column>
      <el-table-column prop="role_name" label="用户名" width="120"> </el-table-column>
      <el-table-column prop="mobile" label="电话" width="150"> </el-table-column>
      <el-table-column prop="email" label="Email" min-width="120"> </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="300"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- /End 表格 -->

  <!-- <Pagination></Pagination> -->

  <!-- 分页 -->
  <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
  </div>
  <!-- /End 分页 -->

</el-main>
<!-- /End 内容区域 -->

import axios from 'axios'

export default {
  name: 'home',
    data() {
      return {
        myInstance: null,   // axios实例
        tableData: [],    // 表格数据

        currentPage: 1,   // 当前页码
        total: 0,   // 总条目数
        query: '',  // 查询参数
        pagenum: 1, // 当前页码
        pagesize: 5 // 每页显示条数
      };
    },
    computed: {
      // token() { return store.state.token }
    },
    components: { Header, Aside, Pagination, Breadcrumb },
    created() {
        this.myInstance = axios.create({
            baseURL: 'http://localhost:8888/api/private/v1/',
            timeout: 1000
        })
        // 添加请求拦截器
        this.myInstance.interceptors.request.use(config => {
          // 在请求头中使用 Authorization 字段提供 token 令牌
          config.headers['Authorization'] = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjozMCwiaWF0IjoxNTY4MDExNzgzLCJleHAiOjE1NjgwOTgxODN9.RFZSMmw7_09645D179GySwsZ2I0QJfVPhADleHqUkQ0'
          console.log(config);
          return config
        }, err => {
          return Promise.reject(err)
        })

      this.getUser()
    },
    methods: {
      getUser() {
        this.myInstance.get('/users',{
          params: {
            query: '',    // 查询参数
            pagenum: this.pagenum,   // 当前页码
            pagesize: this.pagesize // 每页显示条数
          }
        }).then(res => {
          this.tableData = res.data.data.users    // 表格数据
          this.total = res.data.data.total  // 总条目数
          this.currentPage = res.data.data.pagenum  // 当前页码
          console.log(res.data)
        }).catch(err => {
          console.log(err)
        })

      },

      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) { //改变时
        this.pagesize = val;
        this.getUser()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {  //条目改变时
        this.pagenum = val;
        this.getUser()
        console.log(`当前页: ${val}`);
      }
    }
}