el-pagination分页组件使用

script:

data() {
    return {
      list: [],
      userName: '',
      current: 1, // 当前页
      pageSize: 5, // 每页记录数
      total: 10, // 总记录数
      userQuery: {}, // 查询参数
    }
}

js接口:

// 查询列表

// 查询列表
export function listTable(data){
    return request({
        url:'/system/user/list',
        method:'post',
        data: data
    })
}

查询接口：

// 查询
    getListPage() {
      this.loading = true
      this.userQuery.pageIndex = this.current
      this.userQuery.pageSize = this.pageSize
      listTable(this.userQuery).then((response) => {
        console.log(response)
        this.list = response.data.records
        this.current = response.data.current
        this.pageSize = response.data.size
        this.total = response.data.total
      })
    },

 methods: {
    handleSizeChange(val) { // 分页点击事件
      this.pageSize = val
      this.getListPage()
    },
    handleCurrentChange(val) { // 分页
      this.current = val
      this.getListPage()
    },
}

vue：

<div class="block" style="float: right">
      <el-pagination
        :hide-on-single-page="true"
        background
        :current-page="current"
        :page-sizes="[5,10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>