elementui table 分页


场景:每次写前端table分页总是感觉从头来学一遍似的,记录下直接抄

template部分

script代码,如果后端已经做好了分页并且将信息都返回前端

如果后端返回所有的数据,前端自己做分页的话

  methods: {
    getList() {
      fetchList().then(response => {
        this.highArray = response.data.content
      })
    },
    handleSizeChangeHigh(pageSize) {
      this.highPageSize = pageSize
      this.highCurrentPage = 1
      this.fetchList()
      this.handleCurrentChangeHigh(this.highCurrentPage)
    },
    handleCurrentChangeHigh(currentPage) {
      this.highCurrentPage = currentPage
      this.highTableData = this.currentChangePage(
        this.highArray,
        currentPage,
        this.highPageSize
      )
    },
    // 分页方法(重点)
    currentChangePage(list, currentPage, pageSize) {
      let from = (currentPage - 1) * pageSize
      const to = currentPage * pageSize
      this.tempList = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from])
        }
      }
      return [...this.tempList]
    }
  }

实现效果:

参考: https://segmentfault.com/a/1190000016049838