element中使用前端分页

前端分页

当后端没有分页的时候 用element中的组件分页并不能对数据进行切割 需要请求回数据后自己来做切割

<el-table
:data="tableData.slice((queryParams.currentPage-1)*queryParams.pageSize,queryParams.currentPage*queryParams.pageSize)"

:height="$TABLE_HEIGHT-55"

style="width: 100%">

• currentPage 当前页数
• pageSize 每页的数据个数
• slice(n,m)查找数组中两个索引之间的内容 返回新数组从n开始不含m

<!--分页组件-->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryParams.currentPage"
  :page-size="queryParams.pagesize"
  layout="total, sizes, prev, pager, next"
  :total=total>
</el-pagination>


data:{

    queryParams{
     currentPage:1,
           pagesize:10,
}
}


mathods:

• size-change 是pageSize 改变时会触发的函数
• current-change 是currentPage 改变时会触发的函数

handleSizeChange(val) {
    this.pageSize = val;
},
handleCurrentChange(val) {
    this.currentPage = val;
}


https://blog.csdn.net/my466879168/article/details/104728538