vue前端分页

template:

  <el-pagination
          background
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
         :total="total"
   ></el-pagination>

data:

data() {
    retun {
        currentPage: 1,
        total: 0,
        pageSize: 10,
        tableData:[]
        totalPage: [],
        dataShow: []
    }
}

mounted:

this.initList()

methods:

   initList(){
       this.dataShow=this.tableData.slice(0,10)
   },
    pagination() {
      if (this.tableData) {
        let pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1
        for (let i = 0; i < pageNum; i++) {
          this.totalPage[i] = this.tableData.slice(
            this.pageSize * i,
            this.pageSize * (i + 1)
          )
        }
        this.dataShow = this.totalPage[this.currentPage - 1]
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.pagination()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pagination()
    },