Vue + Element-ui 实现表格本地分页

在开发过程中，有一些数据需要在前端本地实现分页效果，效果如图

分页使用的是element-ui的组件
现在就来具体实现一下：

template组件

<el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="prev, pager, next"
    :total="tableData.length">
el-pagination>

js代码

export default {
     
  data() {
     
    return {
     
      currentPage: 1,
      pageSize: 10,
      tableData: []
    }
  },
  created() {
     
    this.selectList()
  },
  methods: {
     
    // 初始化数据
    selectList(n) {
     
      request({
     
        url: 'url地址',
        method: 'get',
        params: '参数'
      }).then(res => {
     
        this.tableData = res.data
        this.tableData = this.currentChangePage(this.pageSize, this.currentPage)
      })
    },
    // 页数改变事件
    handleSizeChange(pageSize) {
     
      this.pageSize = pageSize
      this.tableData = this.currentChangePage(pageSize, this.currentPage)
    },
    // 页码改变切换
    handleCurrentChange(currentPage) {
     
      this.currentPage = currentPage
      this.tableData = this.currentChangePage(this.pageSize, currentPage)
    },
    // 分页方法
    currentChangePage(size, current) {
     
      const tablePush = []
      this.tableCopyTableList.forEach((item, index) => {
     
        if (size * (current - 1) <= index && index <= size * current - 1) {
     
          tablePush.push(item)
        }
      })
      return tablePush
    }
  }
}