vue+elementUI前端分页

分页结构

    <el-pagination class="page"
                   @size-change="pageSizeChange"
                   @current-change="currentPageChange"
                   :current-page="currentPage"
                   :page-sizes="[20, 50, 100]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="totalItems">
    </el-pagination>

数据

		 //用户数据
        users: [],
        //用户表格数据
        usersTableList:[],
 		 //当前页
        currentPage: 1,
        //每页数据条数
        pageSize: 20,
        //数据总条数
        totalItems: 0,

函数

	  //分页
      interceptList () {
        //数据总条数
        this.totalItems = this.users.length
        //每页数据开始index
        let startIndex = (this.currentPage - 1) * this.pageSize
        //每页数据结束index
        let endIndex = this.currentPage * this.pageSize
        //table列表
        if (this.users.length > 0) {
          this.usersTableList = this.users.slice(startIndex, endIndex)
          //如果删除了最后一页的数据
          if (this.usersTableList.length === 0) {
            this.currentPage--
            this.interceptList()
          }
        }
      },
 
       //切换每页数据条数‘点击事件
      pageSizeChange (pageSize) {
        this.pageSize = pageSize
        this.interceptList()
      },

      /**
       * ’切换当前页‘点击事件
       * @param currentPage 当前页
       */
      currentPageChange (currentPage) {
        this.currentPage = currentPage
        this.interceptList()
      },

      /**
       *  table分页后重新设置index
       *  index 表格默认数据index
       */
      indexMethod (index) {
        return index + 1 + (this.currentPage - 1) * this.pageSize
      }