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}`);
      }
    }
}