vue+elementUI分页功能记录(复制即用)

1.第一步需要赋值elementUI里面的分页组件(放在模板上)

 <!-- 分页 -->
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev,pager,next,jumper"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :total="total"
        >
        </el-pagination>

2.第二步需要在data中声明初始值

 currentPage: 1,
      pageSize: 10,
      pageSizes: [10, 25, 50],
      total: 0,

3.第三步在methods中声明绑定的方法

    // 分页功能
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
      this.loadlistInfo() // 是调用查询接口的方法,用于刷新页面
    },
    // 分页功能
    handleCurrentChange (val) {
      this.currentPage = val
      this.loadlistInfo() // 是调用查询接口的方法,用于刷新页面
    },

 4.需要在table中的序号里面绑定计算序号的方法

 <el-table-column type="index" label="序号" width="50" :index="indexMethod"> </el-table-column>

5. 在methods中声明绑定的方法indexMethod

 // 序号计算
    indexMethod (index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.currentPage - 1) * this.pageSize
    }

6.效果图

 7.注意:total总数,在请求查询列表回来的数据,需要赋值

 ps:前端小白,旨在记录日常学习,有不准确的地方,希望大神不吝赐教,嘻嘻~~~~