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

以防丢失，进而转载
原文链接：https://blog.csdn.net/weixin_42547971/article/details/112921030；

element

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

js

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [],   // 表格数据
      tableCopyTableList: [],   // 表格copy数据b
    }
  },
  created() {
    this.selectList()
  },
  methods: {
    // 初始化数据
    selectList(n) {
      request({
        url: 'url地址',
        method: 'get',
        params: '参数'
      }).then(res => {
        this.tableData = res.data
        this.tableCopyTableList = JSON.parse(JSON.stringify(this.tableData))
        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
    }
  }
}