此时后端给你一个接口，接口中有两个参数，第一个是每页多少条数据，第二个是显示第几页，那么如何通过这个接口用vue的方式写出翻页功能，注意，不能使用组件库

首先，我们需要在Vue组件的data中定义好当前页码和每页显示的条数：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0, // 总数据条数
    dataList: [], // 数据列表
  }
}

然后，在组件的created生命周期中，通过调用接口获取第一页的数据：

created() {
  this.getDataList()
}
methods: {
  async getDataList() {
    const { currentPage, pageSize } = this
    const res = await api.getDataList(pageSize, currentPage)
    if (res.code === 0) {
      this.dataList = res.data.list
      this.total = res.data.total
    }
  }
}

接着，我们需要在模板中渲染出分页器，并绑定每个分页按钮的点击事件：

<div class="pagination">
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
  ></el-pagination>
</div>

其中，`@current-change`事件会在点击分页按钮时触发，我们需要在事件处理函数中重新调用接口获取对应页的数据：

methods: {
  handleCurrentChange(currentPage) {
    this.currentPage = currentPage
    this.getDataList()
  }
}

最后，我们只需要将获取到的数据渲染到表格中即可：

<el-table :data="dataList"></el-table>

完整代码如下：

<template>
  <div>
    <el-table :data="dataList"></el-table>
    <div class="pagination">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dataList: [],
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    async getDataList() {
      const { currentPage, pageSize } = this
      const res = await api.getDataList(pageSize, currentPage)
      if (res.code === 0) {
        this.dataList = res.data.list
        this.total = res.data.total
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getDataList()
    },
  },
}
</script>